Fontastic.me 不适用于移动设备 [英] Fontastic.me not working on mobile

问题描述

Fontastic.me 是一个网站，可让您上传 svg 文件，以便您可以将 icons 用作字体.我已经多次使用这个网站，但今天我注意到这些图标在 mobile 上不起作用了.它们确实在计算机上的浏览器 中工作.我今天才注意到它，它以前一直有效.

Fontastic.me is a website that let you upload svg files so you can use your icons as a font. I've used this site lots of times, but today I noticed the icons are not working on mobile anymore. They do work in the browsers on computer. I only noticed it today, it has always worked before.

您可以使用此链接在移动设备上进行测试.

You can use this link to test on mobile.

推荐答案

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

To me it seems like a bug in the Fontastic CSS generator: your page links CSS

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

这包含链接为的最后一个 SVG 回退

this contains last SVG fallback linked as

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

URL 的哈希部分必须与 SVG 中的字体 ID 相对应，但实际来源包含 <font id="cloud-font" horiz-adv-x="512">相反.

the hash part of the URL must correspond with font ID in the SVG, but actual source contains <font id="cloud-font" horiz-adv-x="512"> instead.

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

So replacing #14468301 with #cloud-font in CSS or replacing @id value in SVG should fix your problem.

这仅适用于您的手机真正使用 SVG 版本的情况.只有少数浏览器会这样做(我认为 Android 低于 4.4，可能是旧版 Safari、黑莓，也可能是 Opera Mobile).

This applies only for case your mobile really resorts to SVG version. Only few browsers would do that (I think Android below 4.4, maybe old Safari, Blackberry, and maybe Opera Mobile).

(除此之外，你的 HTML 包含额外的 HEAD 标签，在 BODY 中带有图标 CSS 链接，什么 无效.我不认为这会让任何理智的浏览器完全忽略链接，但不能排除这种可能性.如果你有将您的页面作为真正的 application/xhtml+xml 提供，浏览器应立即显示错误.)

(Besides that, your HTML contains extra HEAD tag with icon CSS link in BODY, what is not valid. I donʼt think this will make any sane browser completely ignore the link, but cannot exclude such possibility. If you have served your page as real application/xhtml+xml, browser should show the error right away.)

这篇关于Fontastic.me 不适用于移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！