Fontastic.me not working on mobile

痴心易碎 提交于 2020-01-06 20:08:46

问题


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.


回答1:


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

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

this contains last SVG fallback linked as

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

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.

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

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).


(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.)




回答2:


Greg, i had the same issue. I end up ditching Fontastic and use https://glyphter.com/ instead.

Glyphter creates your own font set by uploading each character at a time.

It worked for me and perhaps you can try this too and see if it works.



来源:https://stackoverflow.com/questions/33554728/fontastic-me-not-working-on-mobile

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!