1、关于icon font

现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon font的支持如下：

IE：从IE4开始支持eot格式，IE9开始支持woff。

webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式

Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；

Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；

Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；

iPad, iPhone and Android 3.0+ 支持SVG fonts。

使用font-face声明字体：

@font-face {

font-family: 'uxiconfont';

src: url('uxiconfont.eot'); /* IE9*/

src: url('uxiconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('uxiconfont.woff') format('woff'), /* chrome、firefox */

url('uxiconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('uxiconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */

2、在应用icon font实现一淘首页logo发现的问题。

(1)firefox和IE9不支持对icon font字体的跨域访问。可以将字体文件放到同域的服务器上或修改服务器配置，详细见这里。

(2)某些版本(16.0.912.75 m、15.0.874.106)的chrome，在搜索框获得焦点或在搜索框的菜单上滑动时，会产生遮盖logo的现象，其它浏览器未见此现象。

这个与字体的宽度范围设置有关，之前logo的宽度如下，注意红框内虚线部分

修改后的宽度：

对字体修正后，新版的一淘logo字体没有此现象产生。

(3)有同事反馈，firefox无法显示logo。

经过排查发现，造成此问题的原因是用户的设置导致的。

(4)XP上的safari在渲染icon font时，如果ttf文件缺失‘x’字符，会导致操作系统崩溃，造成蓝屏的情况。

这个问题很奇怪，因为在xp上用safari打开ux.etao.com/fonts没有这样的问题。当使用包含所有ux.etao.com/fonts 的图标的字体文件时，也没有出现这种情况，但仅使用一淘logo相关的字体文件时就会出问题。通过对比测试，发现如果ttf字体文件缺少“0078” (unicode编码，字符x)，就会导致这种现象。如下图所示：

此外，从Font Squirrel下载了几种字体，对比测试结论和上面一致：如果使用的ttf字体文件缺少“0078”(unicode编码，字符x)，XP上的safari会导致操作系统崩溃。因此在使用icon font时，要确保ttf字体文件含有“0078”。

(5)IE9 不支持将@font-face放到media query里。这里有对@font-face比较详细的测试情况。

1、关于icon font现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。但是各浏览器对于字体文件格式的支持不尽一致。目前主流浏览器对于icon font的支持如下：IE：从IE4开始支持eot格式，IE9开始支持woff。webkit/safari：支持TrueType/OpenType(.ttf)，Ope... 问题出现场景 http地址在 ie 浏览器可以正常 显示 字体 图标 ，但是https地址在 ie 浏览器无法正常 显示 icon 图标 。 问题解决方案//这是本人的nginx配置文件 location / { add_header Cache-Control "no-cache, no-store"; add_header Access-Control-Allow-Origin $http_origin; 字体 格式是否全部上传（woff2、woff、ttf、eot、svg） 我遇到的情况是 字体 格式只上传了woff2一个文件，其他的格式 字体 为上传，所以 IE 浏览器就不限制 字体 图标