如何使用跨浏览器的Web字体，第2部分

介绍

在我的文章的第1部分（ http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/ ）我介绍了Web字体的语法，看如何基本@字体面对面和字体家庭语法可以一起嵌入在您的网页自定义字体，而稍微复杂的跨浏览器的现实。

在这一部分，我们将走得更远，看着与网页字体相关的常见现实世界的问题，并比较免费和付费选项主办的字体。

第三部分将探讨一些更先进的CSS字体的功能，如断字和字体功能设置。

跨浏览器Web字体 - 问题

所以，你有你的字体，你的服务器上，并在地方你跨浏览器@字体面对面的代码。 检查。 但是你的问题可能不会结束。 在本节中，我会看着你可能会遇到一些进一步的问题，以及建议的解决方案。

坏渲染

跨浏览器测试是最重要的：即使你不属于任何其他问题犯规，你的字体渲染可能只是普通的不好，特别是在IE和Chrome /眨眼基础歌剧院在Windows上。 这可以是由于各种原因，但主要的是：

• 使用ClearType的：ClearType是一种Windows技术，使用亚像素渲染，使字体显示更加平滑。 如果未启用，字体可以看看真的很差，虽然它是默认打开的大多数Windows系统（不迟于XP）。它仍然是一般不是有效，因为Mac OSX的抗锯齿。 请注意，在Windows上其他浏览器不倾向于遭受多，因为他们往往有自己的子像素渲染系统。 欲了解更多信息，请阅读乔恩·谭的“显示类型和光栅战争”（http://v1.jontangerine.com/log/2008/11/display-type-and-the-raster-wars ）

• 谷歌Web字体渲染已经搞砸了在眨眼渲染引擎，而现在由于各种原因：看看下面的bug报告的传奇（https://code.google.com/p/chromium/issues/detail？ ID = 137692 ）

• 某些字体（最有可能免费的）能有可用字形的数量较少，这意味着当你使用一个字符在你的内容，有关的字形是不是在您使用的字体可用，你会得到一个讨厌的惊喜呈现如厄运的可怕丑陋的正方形空格，而不是你所期望的人物。 为了减轻这种负面影响，你应该确保你总是包含在堆栈退一步的字体，即使你使用的是Web字体，例如

font-family: 'Abril Fatface Regular', arial, sans-serif;

FOUT

FOUT代表无样式文本的Flash和 - 虽然它不是那么太大的问题了，只影响早期Firefox和Opera的版本和IE <10 - 你可能仍然遇到它，并希望做一些事情。 这是当你得到无样式的文字出现在您的网页上，而在HTML已经加载，但网页的字体还没有这样做。

有一些字体相关的库和技术可用于处理FOUT，其中许多都提到了保罗爱尔兰的“战斗的@字体面对面FOUT”（http://www.paulirish.com/2009/fighting-the字体-表面- FOUT / ）。 我个人认为是最可靠的技术，是谷歌的Web字体加载器（ https://developers.google.com/fonts/docs/webfont_loader ）。 这包含的Javascript检测到您的网页字体是否已加载但并应用到类文件的 标签来表明自己的身份。 您可以使用这些隐藏元素，直到他们的字体已经加载，例如：

 .wf-loading h1 { visibility: hidden; }

然后当所需的字体已经加载，一个特定的类被添加到 标签来表明这一点，你可以更新元素的显示（如适用）：

 .wf-lobster-n4-active h1 { visibility: visible; font-family: lobster; }

高带宽

添加Web字体到您的网页显然意味着性能损失，这将是可以忽略不计在很多情况下作为一个Web字体大概在50-100KB（作为一个非常粗略的猜测！）你应该限制你在每次使用字体的数量对带宽和性能方面的原因，但即使是单个字体页面可能非常大，尤其是如果它是一个CJK字体（ http://en.wikipedia.org/wiki/CJK ），可以有成千上万里面的字形。

为了缓解这个问题，您可以：

• 创建仅包含您所需要的字符修改后的字体文件。 要做到这一点，你需要一个字体编辑器，如字体锻造（http://fontforge.org/ ）。
• 仅指定您要通过使用，我们在我的系列的最后一部分，看到你@字体面块中的Unicode的范围地产出的字体文件使用的字符。 例如：

 @font-face { font-family: 'Abril Fatface'; src: url("AbrilFatface.otf"); unicode-range: U+0026; }

这指定只能从字体加载符号字符（见http://www.w3.org/TR/css3-fonts/＃unicode的范围，递减为上指定多个字符，包括范围的详细信息）。 unicode-range支持以及整个现代浏览器，具有明显的例外是火狐（我们正在努力就可以了！）。 如果您想使用Firefox或旧的浏览器支持Unicode的范围，你可以使用一个polyfill如jQuery-unicode的范围（ https://github.com/infojunkie/jquery-unicode-range ）。

浏览器的bug和特殊性所

有几个浏览器的bug我还以为我会还提到，为利益的缘故。

用IE9下载EOT错误

如果您使用我们在上一篇文章中，IE9的探索防弹@字体面对面的语法，后来将下载的版本EOT字体和使用，这是一个有点痛苦。

跨域字体失败

按照该规范，则无法从不同的域中加载的字体到你的CSS（虽然Chrome，Safari和Opera不正确地允许这样。）为了绕过这个限制，你可以考虑使用CORS（见http://dev.opera。 COM /文章/观点/ DOM的访问控制-使用-跨域资源共享/ ）

IE浏览器6-8下载了声明，而不是使用的字体

你不应该声明为@你不使用你的页面上结束了字体字体面的规则; IE6-8将它们下载所有反正。

从IIS服务器提供服务的字体

如果您是从IIS服务器提供服务的字体，你需要添加“。WOFF”与MIME类型“应用程序/ x-字体WOFF'到您的IIS安装，即使WOFF没有一个MIME类型。 IIS拒绝提供任何事情，它并没有一个MIME类型。

自托管与托管服务

与@字体面对面怪癖和错误的讨论，让我们圆了这个文章关闭了简要介绍一些不同的选项来获取和托管的字体。 自托管的字体是更昂贵的带宽方面，更加繁琐的设置，但你往往会得到更精确的控制你是如何在您的网站实现的字体。 在另一方面，使用托管服务更快成立（该服务处理所有的跨浏览器的怪癖，等你）和其他人主持的字体适合你。

注：这里的一些机制是免费的，有些是支付。 有许多可用的高品质的免费字体资源，但你得到你所支付的：即使是高品质的免费字体往往会遭受某种方式，无论是通过具有有限的字符集或变体，或仅仅是被过度使用的网络。 如果你想要的东西深，真正原创的出版物，你最好寻找一个支付解决方案。

免费字体源我建议是：字体松鼠（ http://www.fontsquirrel.com/ ），大字体（ http://www.dafont.com/的Movable Type的（），联赛http://www。 theleagueofmoveabletype.com / ）和离散型（http://www.losttype.com/browse/ ）。 最好的免费字体的设计者们通过亚德Limcaco（http://www.smashingmagazine.com/2011/07/19/best-free-fonts-designers/ ）有一些更多的建议和好的建议。

支付字体源我建议：霍夫勒和弗里尔-琼斯（ http://www.typography.com/ ），莱诺（http://www.linotype.com/ ）和群实业（ http://www.houseind 。com / ）。 还有许多其他良好来源呢！

谷歌字体

谷歌字体是一个免费托管的字体服务，可在http://www.google.com/fonts 。 这是合理的优质字体一个伟大的服务，并且很容易使用，非常适合编写快速和肮脏的演示，并组建了一个网站上的预算。 它患有同样的烦恼作为任何免费字体资源：一些比较好的字体得到过度使用，而你得到的选择是相当有限的。

支付托管服务字体

现在有一些高薪字体托管服务，他们也都以类似的方式工作。 你通常：

1. 订阅服务
2. 要使用您的字体上指定的域
3. 指定要使用的字体
4. 贴一些自定义的CSS和Javascript有时到您的网站，处理@字体面和字体家庭编码
5. 测测你的字体选择以某种方式或其他
6. 支付的字体时，把你的网站的活，通常每个字体，每个站点，每年。

我已经尝试了许多这样的服务，但我最喜欢2顷如下：

1. Typekit（ https://typekit.com/ ）：一个Adobe拥有的服务，以涵盖多个站点和字体的使用稍微昂贵的使用计划，并制定出确定为较大规模的业务。 您还可以得到一个有限的免费计划，是为测试不够好，但只有两个在同一时间字体。
2. 字体甲板（ http://fontdeck.com/ ）：独立型的公司来自英国，提供了一个免费的计划，允许一些每个站点的字体测试，但只有当IP地址的数量有限访问。 生产字体耗资约7.50字体每年。 我喜欢这个服务稍微多，因为我已经找到了测试功能更加有用，而且他们还提供了一些不错的OpenType字体功能。

注：丹伊甸园的Web字体服务：好的，坏的和丑陋的 是对Web字体服务的一些进一步的信息的不错的文章。

带来的好处是明显的，通常当你开始使用这些服务：您将有充分字形集和多权重获得高品质的字体和变体投标。 您还可以找到OpenType字体可以用诸如文体和花饰字连字，它可以在Web上使用新生的字体功能设置属性来使用OpenType功能。 这是一件事，我们将着眼于在该系列的第3部分。