Fontastic.me 无法在移动设备上使用

Fontastic.me not working on mobile

Fontastic.me 是一个允许您上传 svg 文件的网站,因此您可以将 icons 用作字体。我已经多次使用这个网站,但今天我注意到 mobile 上的图标不再起作用了。他们确实在 browsers 计算机上工作。今天才发现,之前一直有效

您可以使用此 link 在移动设备上进行测试。

对我来说,这似乎是 Fontastic CSS 生成器中的一个错误:您的页面 links CSS

https://fontastic.s3.amazonaws.com/8pMGtiqubDqmpbD4ER7hE3/icons.css

这包含最后一个 SVG 后备 link编辑为

https://cdn.myfontastic.com/8pMGtiqubDqmpbD4ER7hE3/fonts/1446830181.svg#1446830181

URL 的散列部分必须与 SVG 中的字体 ID 对应,但实际源包含 <font id="cloud-font" horiz-adv-x="512">

因此,将 #14468301 替换为 CSS 中的 #cloud-font 或替换 SVG 中的 @id 值应该可以解决您的问题。

这仅适用于您的手机确实使用 SVG 版本的情况。只有少数浏览器会这样做(我认为 Android 低于 4.4,可能是旧的 Safari、Blackberry,也可能是 Opera Mobile)。


(除此之外,您的 HTML 在 BODY 中包含带有图标 CSS link 的额外 HEAD 标记,is not valid。我认为这不会使任何理智的浏览器完全忽略 link,但不能排除这种可能性。如果您的页面是真实的 application/xhtml+xml,浏览器应该会立即显示错误。)

格雷格,我遇到了同样的问题。我最终放弃了 Fontastic,改用 https://glyphter.com/

Glyphter 通过一次上传每个字符来创建您自己的字体集。

它对我有用,也许你也可以试试这个,看看它是否有效。