字体默认不再生成 .eot、.svg 和 Base64 的说明 #1948

yisibl · 2021-04-30T08:17:23Z

iconfont 现在已经支持用户灵活的配置生成字体格式的功能，可以在「我的项目」→右上角「更多操作」→「编辑项目」→「字体格式」中勾选需要的字体格式。默认将生成 WOFF2、WOFF、TTF 三种格式。

.eot(IE6) 和 .svg 是非常「古老」的字体格式，而且不是 OpenType 标准，我们默认将禁用它们，不推荐在项目中使用，如果需要可以手动开启。同时彩色字体中不支持这两种格式，当勾选彩色选项后会自动禁用这两个选项。

Base64（微信小程序）

由于性能的原因，默认也会禁用 Base64，推荐使用 <link rel="preload"> 对页面字体进行预加载，以便更好的提升字体加载速度。

<link rel="preload" href="//at.alicdn.com/t/font_1962691_8x4tp00tt1u.woff2" as="font" type="font/woff2" crossorigin="anonymous">

在微信小程序的某些场景中，由于微信的限制，不支持使用 CSS @font-face 加载三方字体，可以考虑使用 wx.loadFontFace() API 来加载字体。

wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://sungd.github.io/Pacifico.ttf")',
  success: console.log
})

如果以上方案都无法使用，还可以在项目设置中勾选 base64 选项，并优先开启 WOFF2 或 WOFF 格式，这会减小生成 base64 文件的大小。如果图标过多这会极大的增加 CSS 文件大小，base64 在解码时也会存在一些性能问题。

最后，我们还增加了字体在线预览页面，重新生成后，会在这里展现「预览字体」菜单。给小伙伴分享项目字体效果，提交 bug 时都可以带上这个预览页面的链接。

打开这个链接里面有详细的 <link rel="preload"> 使用示例。这里有一个生成好的演示 Demo

The text was updated successfully, but these errors were encountered:

acegank · 2021-05-06T02:17:13Z

建议可以把base64放在可选项，比如小程序还是有需要用到啊，方便点

wuerwuerhao · 2021-05-06T05:35:16Z

使用在线的生成的css后，并使用font class 的模式去使用，发现::before元素中除了图标，上面还有一截空间，这导致字体难以和其他元素水平居中对齐，在阿里字体网站预览字体，检查元素也是同样的

g1912341321 · 2021-05-06T06:44:05Z

小程序用到base64，希望可以把base64格式加到选项中

dodospace · 2021-05-06T09:17:04Z

建议可以把base64放在可选项，比如小程序还是有需要用到啊，方便点

小程序使用，在线找个工具将woff2转给base64，然后再去iconfont.acss里修改woff2的引用url，就可以了

g1912341321 · 2021-05-06T09:21:18Z

建议可以把base64放在可选项，比如小程序还是有需要用到啊，方便点

小程序使用，在线找个工具将woff2转给base64，然后再去iconfont.acss里修改woff2的引用url，就可以了

我也知道可以转，就是太麻烦了，没有以前那样方便，直接一个地方复制就可以了

yisibl · 2021-05-06T11:28:58Z

@acegank 建议可以把base64放在可选项，比如小程序还是有需要用到啊，方便点

我调研一下这个功能。

gaoshiyong1272 · 2021-05-07T03:19:57Z

不太明白为什么不生成了base64了，这个影响性能吗

gaoshiyong1272 · 2021-05-07T03:28:37Z

不太明白为什么不生成了base64了，这个影响性能吗

已测试：https://www.npmjs.com/package/woff2base64 可以用，为什么不可以加一个选项呢，加选项呼声很高

g1912341321 · 2021-05-07T03:33:41Z

不太明白为什么不生成了base64了，这个影响性能吗

已测试：https://www.npmjs.com/package/woff2base64 可以用，为什么不可以加一个选项呢，加选项呼声很高

兄弟不要如此激动，人家不是说已经在调研了吗？等待回复就可以了

1442765766 · 2021-05-07T07:17:43Z

确实希望base64可以作为一个可选项然后能下载，不然转换太麻烦了，谢谢

nikolausliu · 2021-05-08T08:34:23Z

现在unicode和fontclass图标都有问题，symbol类型的可以。请问出什么问题了，我要怎么做才能使用fontclass图标

nikolausliu · 2021-05-08T09:01:47Z

现在一个项目里不支持同时使用单色和多色图标了？之前我们的项目里是同时有单色和多色图标的，这改版之后项目直接爆炸

yisibl · 2021-05-08T09:39:35Z

@nikolausliu 发一下预览字体的链接，截图中的使用的浏览器版本、操作系统

nikolausliu · 2021-05-10T00:38:55Z

@nikolausliu 发一下预览字体的链接，截图中的使用的浏览器版本、操作系统

//at.alicdn.com/t/font_2075813_4z9e4s1sug5.js
Chrome 90.0.4430.93（正式版本）（64 位）
windows10

nikolausliu · 2021-05-10T00:40:09Z

@nikolausliu 发一下预览字体的链接，截图中的使用的浏览器版本、操作系统

预览字体的链接是这个：https://at.alicdn.com/t/project/2075813/f4c35f39-4bab-4449-8f27-ceda94bd6761.html?spm=a313x.7781069.1998910419.38

ZBEvans · 2021-05-10T02:17:10Z

小程序中一直使用到base64做交叉颜色渲染，突然没有base64了，着实被坑了一把，希望官方提供选择支持

Kalimdor-cn · 2021-05-10T08:32:00Z

@nikolausliu 发一下预览字体的链接，截图中的使用的浏览器版本、操作系统

今天上传了几个新图标，重新生成后，Unicode和Font class 都有问题，Symbol是正常的。预览链接
https://at.alicdn.com/t/project/37546/21049af9-0257-43a6-8c7e-2fd08733737d.html?spm=a313x.7781069.1998910419.58
浏览器F12里面有报错 “Failed to decode downloaded”

ctforcp · 2021-05-10T08:38:27Z

以前的base64怎么转出来的，我项目有好多base64，现在不知道怎么转了，能不能添加上base64选项，或者以前的base64是怎么生成出来的

yisibl · 2021-05-10T09:28:23Z

@nikolausliu 这几个图标的 SVG 本身有问题，里面包含一个透明度很小的矩形 path（黑色方块部分），默认情况下，所有半透明的 path 生成字体后会变成不透明的 path。所以用 SVG 预览是看不出来的，生成字体后变成不透明就显示出来了。请下载 SVG 后删除掉这个 path 重新上传图标即可。

以购物车图标为例：

<svg t="1620638850929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1480" width="200" height="200">
    <!-- 删除这个 path -->
    <path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity=".01" p-id="1481"></path> 

    <path d="M394.001067 700.5184a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m341.333333 0a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m-341.333333 51.2a34.133333 34.133333 0 1 0 0 68.266667 34.133333 34.133333 0 0 0 0-68.266667z m341.333333 0a34.133333 34.133333 0 1 0 0 68.266667 34.133333 34.133333 0 0 0 0-68.266667zM205.550933 110.933333c25.6 0 48.128 16.247467 56.4224 40.072534l1.4336 4.846933 111.616 436.4288c4.437333 17.408 19.285333 30.037333 36.864 31.8464l4.437334 0.238933h298.837333c16.384 0 31.1296-9.3184 38.263467-23.7568l1.7408-4.096 88.576-238.933333a42.666667 42.666667 0 0 0-34.986667-57.173333l-5.0176-0.3072H363.349333v-51.2h440.388267a93.866667 93.866667 0 0 1 89.9072 120.832l-1.911467 5.666133-88.541866 238.933333a93.866667 93.866667 0 0 1-81.5104 61.0304l-6.485334 0.2048h-298.837333a93.866667 93.866667 0 0 1-89.258667-64.750933l-1.706666-5.870933L213.8112 168.5504a8.533333 8.533333 0 0 0-6.007467-6.144l-2.2528-0.273067H102.4v-51.2h103.150933z" fill="#979797" p-id="1482"></path>
</svg>

nikolausliu · 2021-05-11T01:20:46Z

@nikolausliu 这几个图标的 SVG 本身有问题，里面包含一个透明度很小的矩形 path（黑色方块部分），默认情况下，所有半透明的 path 生成字体后会变成不透明的 path。所以用 SVG 预览是看不出来的，生成字体后变成不透明就显示出来了。请下载 SVG 后删除掉这个 path 重新上传图标即可。

以购物车图标为例：

<svg t="1620638850929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1480" width="200" height="200">
    <!-- 删除这个 path -->
    <path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity=".01" p-id="1481"></path> 

    <path d="M394.001067 700.5184a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m341.333333 0a85.333333 85.333333 0 1 1 0 170.666667 85.333333 85.333333 0 0 1 0-170.666667z m-341.333333 51.2a34.133333 34.133333 0 1 0 0 68.266667 34.133333 34.133333 0 0 0 0-68.266667z m341.333333 0a34.133333 34.133333 0 1 0 0 68.266667 34.133333 34.133333 0 0 0 0-68.266667zM205.550933 110.933333c25.6 0 48.128 16.247467 56.4224 40.072534l1.4336 4.846933 111.616 436.4288c4.437333 17.408 19.285333 30.037333 36.864 31.8464l4.437334 0.238933h298.837333c16.384 0 31.1296-9.3184 38.263467-23.7568l1.7408-4.096 88.576-238.933333a42.666667 42.666667 0 0 0-34.986667-57.173333l-5.0176-0.3072H363.349333v-51.2h440.388267a93.866667 93.866667 0 0 1 89.9072 120.832l-1.911467 5.666133-88.541866 238.933333a93.866667 93.866667 0 0 1-81.5104 61.0304l-6.485334 0.2048h-298.837333a93.866667 93.866667 0 0 1-89.258667-64.750933l-1.706666-5.870933L213.8112 168.5504a8.533333 8.533333 0 0 0-6.007467-6.144l-2.2528-0.273067H102.4v-51.2h103.150933z" fill="#979797" p-id="1482"></path>
</svg>

好的，感谢回复。还有一个问题，在这次改版之前，我的项目里是单色和彩色字体并存，都使用fontclass，这样彩色字体可以原样显示，单色字体也可以通过样式来赋予不同的颜色。但是这次改版之后我面临了两个问题：

单色字体和彩色字体似乎无法并存了（我从官方图标库里随意挑选了几个单色和彩色图标测试了一下）。
a. 如果【项目编辑】的【字体格式】里不勾选【彩色】，则FontClass的彩色图标的颜色消失了。这是预览链接：https://at.alicdn.com/t/project/1110402/59f00e1f-8708-45a2-b623-9ef1f6974157.html?spm=a313x.7781069.1998910419.35
b. 想法，如果勾选了【彩色】，看似FontClass所有图标都显示正常了，但是单色图标无法通过样式修改其颜色了。这是预览链接：https://at.alicdn.com/t/project/1110402/59f00e1f-8708-45a2-b623-9ef1f6974157.html?spm=a313x.7781069.1998910419.35
以及我尝试修改样式得到的结果：
基于第一点，我想到的解决方案是，把项目中的彩色图标独立成一个单独的项目，但是我遇到了另一个问题，彩色图标项目图标个数不能超过40个

所以我的问题有两个：

想在一个项目中同时使用单色和多色图标，是否必须把单色和多色拆分成两个项目管理？有没有更优雅的方案？
彩色图标不能超过40个的限制是否是永久的、对所有用户群体一致的限制，这个限制是因为什么呢？

yisibl · 2021-05-11T12:55:07Z

新增了 base64 选项，详见：#1948 (comment)

yisibl · 2021-05-11T13:13:45Z

@nikolausliu

不勾选「彩色」选项实际生成的字体都是黑白的，之前也无法和多色图标共存。可以通过 CSS 修改颜色，且一个图标只支持显示一种颜色。需要多色图标原先只能通过 SVG Symbol 的方式加载，这实际上使用的是 SVG，与字体无关了。
勾选「彩色」选项后，Chrome 无法修改单色图标的颜色，这是 Chrome 的 Bug，请点击这个 Bug 左上角的星，以便让 Chrome 开发者尽快修复这个问题。（Safari 中没有这个问题）
多色的字体图标修改颜色请看这个 issue：https://bugs.chromium.org/p/chromium/issues/detail?id=1170794
彩色图标不能超过 40 个的限制后面会逐渐放开。

nikolausliu · 2021-05-12T01:20:55Z

@yisibl
好的，感谢！

nikolausliu · 2021-05-12T01:58:29Z

@nikolausliu

不勾选「彩色」选项实际生成的字体都是黑白的，之前也无法和多色图标共存。可以通过 CSS 修改颜色，且一个图标只支持显示一种颜色。需要多色图标原先只能通过 SVG Symbol 的方式加载，这实际上使用的是 SVG，与字体无关了。

勾选「彩色」选项后，Chrome 无法修改单色图标的颜色，这是 Chrome 的 Bug，请点击这个 Bug 左上角的星，以便让 Chrome 开发者尽快修复这个问题。（Safari 中没有这个问题）

多色的字体图标修改颜色请看这个 issue：https://bugs.chromium.org/p/chromium/issues/detail?id=1170794

彩色图标不能超过 40 个的限制后面会逐渐放开。

你好，我刚测试了【勾选彩色后单色图标无法修改颜色】这个问题在Safari下的表现，发现也修改不了。下面是相关信息

字体预览链接：https://at.alicdn.com/t/project/1110402/620375fb-7dc6-4007-8c98-c6df302d2e50.html?spm=a313x.7781069.1998910419.35

修改前:

修改后:

safari版本:

macos版本:

同时我还测试了在firefox下的表现，同样是无法修改的

3050649968 · 2021-05-12T02:38:11Z

iconfont官方在今天新增回了base64选项了，我们公司是小程序，可是为什么下载导出了还是没办法复用，用了之后小程序很多icon都丢失了，这是为什么，代码看上去没什么问题，

这边对比了一下，新下载的文件大小和旧的能用的文件大小没什么区别，无疑是多了几个新增的icon容量大小，代码看了一下也没什么问题，可是还是用不了，对比旧的依旧是进去都没显示出来，目前还是用旧的，请问这是为啥啊啊啊啊啊 TAT

yisibl · 2021-05-12T03:12:40Z

@nikolausliu 很抱歉，目前彩色字体的编译方式暂不支持通过 CSS 修改颜色，如果需要修改请在项目中编辑图标的颜色再生成字体。等 Chrome 修复了这个 Bug，我们再考虑开启。

想查看彩色字体修改颜色的效果可以在 Safari 中打开这个 Demo：https://mo.m.taobao.com/union/color-font-test

yisibl · 2021-05-12T03:13:38Z

@3050649968 请提供项目 id 或预览链接。

3050649968 · 2021-05-12T03:32:29Z

2021-4-28优汇多icon.zip

@ 3050649968请提供项目id或预览链接。

https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.12&manage_type=myprojects&projectId=2143645&keyword=&project_type=&page=

目前还是用不了，这是旧的文件包，旧的还是能用，但是新的就不能用
2021-4-28优汇多icon.zip

3050649968 · 2021-05-12T03:33:20Z

@3050649968 请提供项目 id 或预览链接。

小程序这边目前还是无法使用新下载的文件包

yisibl · 2021-05-12T04:10:14Z

@3050649968

我这边测试可以显示

请查看小程序开发者工具是否有报错？然后按照如下方式排查一下：

选择当前项目中的一个图标，添加到新的测试项目中，测试项目只包含这一个图标，看看能否显示。如果还不能显示，把这个测试项目的 ID 发给我，我进一步排查。
使用 wx.loadFontFace() API 加载 WOFF2 或 WOFF 字体
尝试只勾选 WOFF 和 base64 格式，查看是否可以显示

star-ay · 2021-05-13T09:38:06Z

今天上传了几个新图标，重新生成后，下载预览Unicode和Font class 都有问题，无法显示图标，Symbol是正常的。预览链接https://at.alicdn.com/t/project/2037214/db9340b9-8849-4fcb-9b18-d04243a8d8af.html?spm=a313x.7781069.1998910419.44。iconfont.tff 文件预览 @@@里边的显示内容挤到一小块了，这是什么问题？怎么整这个？ @yisibl

yisibl · 2021-05-20T09:15:47Z

@star-ay 请用这个里面的 CSS 替换试一下：https://at.alicdn.com/t/project/2037214/5b5ad6fb-0054-4442-a296-66024cbe0ded.html?spm=a313x.7781069.1998910419.38

qiugc · 2021-06-02T06:32:45Z

最新的iconfont ttf与woff文件下载以后在android的浏览器上图标不显示
Project id 1595643

mmaiIconfont · 2021-09-01T10:19:15Z

点击更新代码报错了

fengchuanBIG · 2021-09-03T02:37:25Z

发现到现在彩色字体还是有限制要求，这个一般什么时候放开呢。彩色弄多一点都不行囧囧

fengchuanBIG · 2021-09-03T02:37:44Z

数量不做限制吧囧

shotolee · 2022-04-05T09:22:56Z

老项目，新增了icon后导出font class压缩包，引入到原来的web项目中，原来的一些图标会乱，对不上。
https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2278063

qieasan · 2022-05-05T09:18:29Z

为什么我只勾选了 SVG格式，每次新添加一个图片都需要我更新一下

wenfangdu · 2023-05-24T08:58:33Z

@yisibl 现在没有「预览字体」选项了，是有意为之还是 bug 呢？

yisibl changed the title ~~字体默认不再生成 .eot~~ 字体默认不再生成 .eot、.svg 和 Base64 的说明 Apr 30, 2021

This was referenced Apr 30, 2021

为什么下载的文件中没有svg和eot格式？ #1947

Closed

项目生成的在线预览，为什么ttf没有转成bese64了？昨天都还有转的 #1946

Closed

yisibl pinned this issue Apr 30, 2021

yisibl added the official 官方 label Apr 30, 2021

This was referenced May 13, 2021

图标库本地下载缺失svg文件 #1962

Closed

图标下载代码，代码包里面的iconfont.css不完整，导致小程序无法显示图标 #1965

Closed

yisibl mentioned this issue May 14, 2021

支持彩色字体图标（包含渐变） #1938

Open

2 tasks

yisibl mentioned this issue May 20, 2021

windows 微信小程序pc端的问题 #1971

Closed

This was referenced May 31, 2021

微信小程序中如何引入阿里图标 #1980

Closed

为什么取消了.css文件中base64字体 #1983

Closed

thx deleted a comment from liwenda122 Jun 17, 2021

yisibl closed this as completed Apr 11, 2023

字体默认不再生成 .eot、.svg 和 Base64 的说明 #1948

字体默认不再生成 .eot、.svg 和 Base64 的说明 #1948

Comments

yisibl commented Apr 30, 2021 • edited Loading

Base64（微信小程序）

acegank commented May 6, 2021

wuerwuerhao commented May 6, 2021

g1912341321 commented May 6, 2021

dodospace commented May 6, 2021

g1912341321 commented May 6, 2021

yisibl commented May 6, 2021

gaoshiyong1272 commented May 7, 2021

gaoshiyong1272 commented May 7, 2021

g1912341321 commented May 7, 2021

1442765766 commented May 7, 2021

nikolausliu commented May 8, 2021

nikolausliu commented May 8, 2021

yisibl commented May 8, 2021 • edited Loading

nikolausliu commented May 10, 2021

nikolausliu commented May 10, 2021

ZBEvans commented May 10, 2021

Kalimdor-cn commented May 10, 2021

ctforcp commented May 10, 2021 • edited Loading

yisibl commented May 10, 2021 • edited Loading

nikolausliu commented May 11, 2021 • edited Loading

yisibl commented May 11, 2021

yisibl commented May 11, 2021

nikolausliu commented May 12, 2021

nikolausliu commented May 12, 2021

3050649968 commented May 12, 2021 • edited Loading

yisibl commented May 12, 2021

yisibl commented May 12, 2021

3050649968 commented May 12, 2021 • edited Loading

3050649968 commented May 12, 2021

yisibl commented May 12, 2021 • edited Loading

star-ay commented May 13, 2021

yisibl commented May 20, 2021

qiugc commented Jun 2, 2021

mmaiIconfont commented Sep 1, 2021

fengchuanBIG commented Sep 3, 2021

fengchuanBIG commented Sep 3, 2021

shotolee commented Apr 5, 2022

qieasan commented May 5, 2022

wenfangdu commented May 24, 2023

yisibl commented Apr 30, 2021 •

edited

Loading

yisibl commented May 8, 2021 •

edited

Loading

ctforcp commented May 10, 2021 •

edited

Loading

yisibl commented May 10, 2021 •

edited

Loading

nikolausliu commented May 11, 2021 •

edited

Loading

3050649968 commented May 12, 2021 •

edited

Loading

3050649968 commented May 12, 2021 •

edited

Loading

yisibl commented May 12, 2021 •

edited

Loading