1

我使用 IcoMoon 生成了一个 Icon webfont,然后使用 FontSquirrel 将 TTF 文件转换为 WOFF 和 WOFF2 文件。

WOFF 文件供 IE 用户使用,WOFF2 供所有其他浏览器使用。

我在 FontSquirrel 中使用了这些设置:

  • Truetype 提示:保持存在
  • 渲染:修复 GASP 表
  • 垂直指标:自动调整垂直指标
  • 修复缺失的字形:空格、连字符
  • X 高度匹配:无
  • 子集:无子集
  • 高级选项 - Em Square 值:2048;调整字形间距:0

我在我拥有的所有设备和浏览器(Windows、Linux、Android、iPhone、所有浏览器)上进行了测试,并且 WOFF2 文件运行良好。
Apache 以 响应Content-Type: font/woff2,并且没有 CORS 问题。

但是,一些用户报告说网站上的所有图标都显示为带有十字 (☒) 的正方形。
报告问题的用户正在使用:

  • Android 9 上的 Chrome v84(华为 Y6 2019)
  • Android 8 上的 Chrome v89(三星 Galaxy S7)

一旦我更改@font-face为使用 WOFF 文件,这个问题就解决了。

我也有一些谷歌字体(自托管),以类似的方式与 WOFF2 一起服务,这些字体在报告上述问题的用户的设备上运行良好。

有什么想法为什么在某些设备上自托管的 Google Fonts WOFF2 可以工作,但我生成的 Icons/Glyphs WOFF2 文件却不行?

4

0 回答 0