by zhangxinxu from http://www.zhangxinxu.com
本文地址： http://www.zhangxinxu.com/wordpress/?p=417

下为翻译内容

您可以说最近几个月我已经或多或少的迷上了@font-face嵌入。我几乎因为来自fontsuirrel.com的@font-face制造者摔了个大跟头（见下面的简要阐述）。

不过，有一件事一直困扰我的是IE7和IE8的嵌入式字体渲染，所以今天准备放纵一下，靠着手上的IE tester和google，发誓要拿出一个解决办法，我想我可能刚刚做到了。

一、首先是一个快速回顾

如果您之前没有读过我关于@font-face的文章，我建议您可以直接看一下下面的这两篇文章：

• 现在重温@font-face字体嵌入的介绍
• 使用@font-face嵌入字体是使用前面提到的fontsquirrel.com 的@font-face发生器的一种引导

二、现在，让我来说明这个问题

当使用@font-face嵌入字体是在IE6下（令人惊奇）的渲染呈现很完美，跟Firefox或是Safari浏览器一样，但是IE7和IE8建立一个符合标准的锯齿状字体，真是不好看。

看一下第一个demo页面，这是个简单的例子，里面已经嵌入了一个特定的的font-face。如果情况允许，您可以看一看该页面在Firefox浏览器以及其他浏览器，如IE7/8下的差别。

译者注：下为我在Firefox和IE7下的截图

Firefox浏览器下

IE7浏览器下

三、什么原因造成的？

经过我的大量研究，我发现问题是由于Mircosoft的ClearType 功能造成的。之所以设计ClearType（其效果显著）是为了使网上提供的文本渲染和整个Windows系统的清晰阅读。对于正文而言，这是非常棒的，正如我所说的，它确实有效。但是涉及到被嵌入的一些特定的字体，ClearType也试图去起作用就显得没有必要了。也就是这东西给了我们不想要的在文字表面看到的锐利的，锯齿状的东西。因为我们想要的是没有锯齿的文字就像我们在Firefox，IE6和Safari下看到的一样。

（注：这里有更新，仅显示更新内容）
对于IE6中，Windows XP不强制ClearType进入浏览器，而Windows Vista与IE7的是预装（掉进自己的固定的支架中（类似于曹操绑船被烧之意）），因此，IE6用户可能面临ClearType问题是微乎其微。

四、如何修复这个问题

好消息是，通过浏览器，在用户正在浏览你的网站时有一个方法可以禁用ClearType。现在，除了我今天证明的这个，我不建议此方法在其他任何地方使用。通常而言， ClearType才能搞清楚并帮助访问者以阅读飞方式阅读你的站点。在大多数情况下禁用ClearType导致可怕的正文渲染，用户的将满眼是需要帮助的问题。

禁用ClearType的过程

Internet Explorer有一个规则。就是ClearType不作用于使用其专有CSS滤镜的元素，因为这类元素会对浏览器产生冲突并导致更广泛的问题，所以我们可以利用这个安全漏洞使IE与嵌入字体独立开来。

现在遗憾的浏览器之间的一些微妙的差异意味着我们不能简单地套用无用的过滤器，继续前进。

看一下第二个demo页面，我已经对IE7和IE8做了一些额外的修复。继续，同时在Firefox浏览器和IE7/8下观看，你会发现在IE下文字的表现好了很多。下面讲解我到底添加了什么。

IE7下

Firefox下

五、修复的关键

h2, p {font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;}

这上面的一小片css修复了IE7和IE8下的锯齿问题，正如在前面的demo页面中看到的。关键在于css的滤镜属性以及zoom属性，这是两个仅在IE下才管用的属性。

看滤镜属性

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);

这部分主要是针对IE8的，IE7和IE8都需要一个滤镜来禁用ClearType，但是IE8不得不做些实际的事情来承认它。我同时注意到，如果IE8中没有出现一个背景图片，那么ClearType禁用的效果甚微。所以呢，这个滤镜属性可谓一石二鸟。我们为IE7/8添加了一个检查所需盒子的滤镜，还添加了一个1*1像素的png图片来满足IE8。

看zoom属性

zoom:1;

这是纯粹为IE7准备的。其修复了一个haslayout的问题。如果您对haslayout一无所知，不要担心。根本上将，IE滤镜不能作用于任何没有"layout"的元素，所以这个zoom:1属性给我们的标题"layout"。haslayout仅仅在IE7及其以下版本才有。它已经从IE8上卸掉了（谢天谢地）。更多关于haslayout的知识点这里

六、完成和一些细枝末节

所以，在将来，当使用@font-face嵌入字体的时候，你可以使用两个仅IE支持的CSS属性以及一个1像素*1像素的png图片来让您的文字在IE7/8没有锯齿。您甚至可以把这两个属性放在一个单独的IE样式中，因为我们除了稍微调整样式外其他什么也没有做。

需要指出的是，不管哪个变通方法，您都需要以网站为基础在您的网站上做测试，以确保此修复给了你想要的结果。IE浏览器下，即使是字体渲染的微调也是不可预测的，所以测试和不断的调整是必须的！

七、文件摘要

• 第一个demo页面——展示了有锯齿的@font-face嵌入例子
• 第二个demo页面——展示了一个使用了css修复的@font-face嵌入例子
• zip打包——包括两个实例页面和资源文件
• jQuery插件——快速简单的jQuery插件以完成修复

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址： http://www.zhangxinxu.com/wordpress/?p=417

（本篇完）