方法/步骤
-
下面就拿我本地的图标来讲讲解决办法吧。
先看看现象:第一张为乱码图,第二张为正常图。
-
出现这种情况的原因是:浏览器强制使用了某些字体导致现在网页流行的字体图标的失效。
也就是说网页上使用了流行的某种字体,而浏览器强制网页显示为其他字体,这样网页中的字体效果就失效了,但它又无法以强制的字体显示,所以就出现了乱码现象。
-
那么怎么解决呢?
办法还是有好多的,但不能保证都管用,虽然本质原因相同,但不同情况下解决方式是不同的。
-
第一种办法:
在网页中设置当前字体为网页流行字体。
body {font-family: "Microsoft YaHei","iconfont" !important;}
但这种情况适用于自己开发的网页,要是别的网站,比如淘宝,你总不能去改淘宝的网页源码吧。
-
第二种办法:
修改Firefox浏览器配置。
-
1、点击菜单-“选项”。
-
2、点击“内容”-“高级”。
-
3、选中“允许页面选择显示字体而无需使用上面的设置”。
-
这种办法适用于解决某些网站无法正常显示字体的问题。
但有时候也未必管用。
-
第三种办法:
使用@font-face。
格式如下:
-
@font-face { font-family: 'font-family名称'; src: url('font字体路径')}
-
如下图,第一张为引用字体的css,第二张为字体文件列表。
-
这种办法相当于把网页用到的字体直接引用在了网页中,一般情况下可以解决网页字体图标乱码问题。
不过,类似第一种办法,这种办法也只能解决自己的网页问题,对于别人网页的问题只能由他们自己解决,或者通过第二种办法来解决了。