字体内的图标是否适合网站？

Question

我想创建只包含图标的特殊字体.并且对于每个字母将是不同的图标.我想在css中嵌入这个字体.如果我需要一些图标,请使用这样的:

<a class="icon">f</a>

和css

<link href='http://fonts.mysite.com/css?family=MyFontWithIcons' rel='stylesheet' type='text/css'>

其中包含:

@media screen {
@font-face {
  font-family: 'MyFontWithIcons';
  font-style: normal;
  font-weight: normal;
  src: local('MyFontWithIcons'), url('http://fonts.mysite.com/font?MyFontWithIcons') format('truetype');
}
}

并显示带有图标类的图标:

.icon {font-family: 'MyFontWithIcons'; }

字母"f"将替换为位于f字母位置的字体内的图标.和css一起使用字体并用字体内的图标替换f.我认为这是好主意吗？字体文件的大小比许多图像图标小.而且这种技术我可以使用不同的字体颜色=不同的图标颜色？尺寸等.那么,这是好主意还是不好？

Answer 1

使用自定义字体图标的问题在于,如果出现以下情况,则没有备份计划:

• 您用户的浏览器太旧而无法支持 @font-face
• 用户代理不是您的传统浏览器(例如,盲人,搜索引擎,HTML到文本转换器等的屏幕阅读器)
• 用户将包含"图标"的文本复制粘贴到丢弃丰富格式信息或没有相关字体的内容中.
• 用户代理永远不会支持@font-face(例如,用于Unix/Linux的文本Web浏览器,如Lynx,Links2和ELinks)
• 用户位于公司代理的后面,在显示自定义字体之前,该代理会丢弃或破坏浏览器所需的标头.(比你想象的更常见)
• 用户正在运行NoScript,并启用了默认的字体阻止行为,以防止字体引擎中的0天漏洞利用.

图像提供alt属性就是出于这个原因.

但是,如果您要将字体用于图标,请确保将字形存储在Unicode 专用区域中.通过确保可能没有冲突(公司可以并且有时使用PUA字形来存储自定义数据)来缓解这个问题,并且如果它们被巧妙地编码,屏幕阅读器可以知道优雅地忽略PUA字形.

至于实现回退,我建议使用Modernizr(特别是Modernizr.fontface)来测试支持.