随着移动网络的兴起,移动版网站图标大行其道。图片标由于体积大,对速度不够友好。所以现在较普遍的做法是做字体代替,当时前提是浏览器要支持CSS3。
字体图标较著名的是fontawesome-webfont.woff。
由于WOFF微软的IIS并不支持,所以当我们把使用此字体的网站发布到IIS上以后,会发现图标不见了。经过网络跟踪可以看到404错误。
这是因为.woff在IIS没有类型映射。遇到这样的问题,我们可以这样操作:
1. 打开IIS,找到站点,查看MIME选项。在选项中增加“ 文件名:.woff 类型为:font/opentype ”的项目。
2. 重启此站点,或重启IIS。
woff就可以使用了。
对于网络跟踪出现的:@font-face 未能完成opentype嵌入权限检查。权限必须是可安装的
可以通过以下技术解决:
在CSS中,如:font-awesome.min.css
可以看到:
- @font-face
- {
- font-family:'ui-grid';
- src:url('ui-grid.eot');
- url('ui-grid.woff') format('woff'),
- url('ui-grid.ttf?') format('truetype'),
- url('ui-grid.svg#ui-grid') format('svg');
-
- }
变成:
@font-face{
font-family:'FontAwesome';
src:url('../font/fontawesome-webfont.eot');
src: url('../fonts/fontawesome-webfont.eot');
url(‘../fonts/fontawesome-webfont.eot#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;
}
即可。
另外,有可能的话,在font文件里把fontawesome-webfont.ttf 也加上。
现在360浏览器的装机量很大,而360兼容模式并不支持,可以通过以下方式直接强制切换到极速模式。
1,网页头部加入
<meta name=”renderer” content=”webkit”>
360浏览器就会在读取到这个标签后,立即切换对应的极速核。
2,另外为了保险起见再加入
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge,chrome=1″ >