Web上的字体
web上只有少数几种字体的时代已经成为过去。问题不再是缺乏可行的解决方案，而是有大量可行的解决方案。像Cufon, sIFR, FLIR等技术@font-face所有这些都代表了不同的开发团队，他们对网页排版的未来押下了赌注。
到目前为止，在这个不断演变的游戏中还没有达成共识。所有这些方法都有完全有效的论据来支持和反对它们的使用。此外，即使是最流行的浏览器也在很大程度上支持这些技术。
然而,@font-faceCSS方法是这个游戏中最强、最简单、最灵活的竞争者之一。它似乎是目前最流行的一种字体，吸引了所有人的注意，并导致许多网站弹出来提供免费和高级字体来支持它。本指南将教你如何实现@font-face与跨浏览器的兼容性同时，我们也会关注一些已经出现的支持服务，使您更容易在您的网页中使用自定义的网页字体格式网页设计．
授权和免费字体
字体授权展示之一最大的麻烦这也是网页排版的绊脚石。字体铸造厂自然希望获得报酬，因此对字体的使用施加严格的限制。这些铸造厂与各种溢价合作@font-face我们将在本文后面讨论的解决方案，但现在，我们将通过使用免费字体来完全避开许可问题。
网络字体授权问题导致了大量网站提供高质量的免费字体。其中，我最喜欢的两个是字体的松鼠和Fontex。这些网站都提供大量的资源绝对免费甚至共享许多相同的字体选择。
基本的语法
@font-face只需要几行CSS因此非常容易使用，不需要任何第三方工具。首先，在上面提到的一个免费字体网站停下来，下载Chunkfive(或任何其他你喜欢的字体)。下载完字体后，将字体文件放在网页的根目录中。
现在，进入样式表，插入以下代码:
@font-face {font-family: Chunkfive;src: url(“Chunkfive.otf”);｝
这个代码片段为自定义字体提供了CSS其余部分的一个标识符，然后当这个标识符被提及时指向要使用的字体文件。代码中的第一行将标识符“Chunkfive”设置为字体。最好总是使用字体名称来保持简单，但你最终可以使用任何你想要的名称。
“MyReallyCoolFont”将工作，只要你在其他地方使用相同的名称的字体。第二行告诉浏览器当“Chunkfive”被调用时，它应该加载字体Chunkfive.otf文件来自提到的url。这个url就是你选择放置字体文件的地方。
如果您将Chunkfive放在名为Fonts的文件夹中，此属性将读取url(字体/ Chunkfive.otf)．当你想在网站的任何地方使用这种字体时，只需像平常一样构建一个字体堆栈，在开头使用自定义字体标识符。
字体类型:Chunkfive， Georgia, Palatino, Times New Roman, serif;
如果自定义字体由于某些原因不能工作，设置这些回退措施是很重要的。
一定要使用至少一种备用字体测试您的设计以确保它不会导致您的布局中断。根据浏览器的不同，这将为您提供一个具有可工作的自定义字体的页面。文本应该立即加载，是完全可选择的，应该与复制/粘贴计算功能(其他字体替换技术的限制)。
在HTML文本块上使用Chunkfive的截图。
跨浏览器的兼容性
如果在线使用自定义字体能这么简单就好了，但事实并非如此。当然,我们不可能期望所有的浏览器都在一个给定的解决方案上表现良好。这是不合理的。
取而代之的是，所有主流浏览器都决定以自己的方式来支持字体格式［1］．
- Internet Explorer浏览器只支持测试结束
- Mozilla浏览器支持传递和TTF
- 支持Safari和OperaOTF、TTF和SVG
- Chrome支持TTF和SVG。
此外，iPad和iPhone上的Safari等移动浏览器也需要SVG．困惑了吗?你应该。
幸运的是,有一些优秀的开发者已经为你解决了这一切通过开发简单的系统来遵循。最流行的利用方法@font-face跨多个浏览器似乎是Paul Irish的防弹@font-face语法。用爱尔兰人的方法包含多个版本的字体这样它就可以在所有浏览器上工作。
当在搜索引擎优化这不会直接影响搜索结果，但它会创造一个更好的用户体验，导致更高的时间在网站上，和更好的排名。此外，该代码包含一个小技巧，可以忽略本地安装的具有相同名称的字体。尽管加载本地字体要快得多，但大多数人都认为这样做往往会导致混乱的结果［2］．
让我们看看使用Chunkfive的防弹语法:
@font-face {font-family: 'ChunkFiveRegular;src: url (Chunkfive-webfont.eot);src: local(， ò?')， url('Chunkfive-webfont.woff') format('woff')， url('Chunkfive-webfont.ttf') format('truetype')， url('Chunkfive-webfont.svg#webfont') format('svg');粗细:正常;字体样式:正常;｝
和以前一样，我们首先为其余代码声明一个标识符。接下来，我们参考EOT版本的IE字体。如果浏览器不是IE，它会忽略这一点并向下移动，直到它找到一个它可以使用的字体类型。
的src:本地bit是我上面提到的局部字体技巧。它本质上告诉浏览器使用一个虚拟的字体名称，这个名称不会出现在您的机器上，这样就不会因为显示错误的字体而造成混乱。最后,设置粗细而且字体样式这里的“正常”将确保所有浏览器默认为相同的值。
这使得您可以稍后在CSS中应用伪粗体或斜体样式。如果没有这个代码片段，Webkit浏览器将忽略任何权重或样式命令。请记住在不同的浏览器和操作系统中，字体呈现会有很大的差异．
许多开发人员在Windows和Internet Explorer中都经历过如此糟糕的结果，以至于他们完全避免使用自定义字体。一定要在所有浏览器上仔细检查结果，以确定质量是否可以接受。拥有一个在所有浏览器上都能看到的响应性网站是非常重要的，尤其是对科技公司．
对于一家本应精通技术的公司来说，没有什么比一个网站因为字体无法在浏览器上运行而无法查看更糟糕的了。
我在哪里得到所有这些字体类型?
您可能已经注意到，上面的方法要求您使用的每个自定义字体至少有四个不同的版本。许多字体源，如Fontex，通常只会在下载中提供一种文件类型。
那么当只有一个字体文件时该怎么办呢?
字体的松鼠
答案是加字体的松鼠添加到你的新宠网站列表中。Font Squirrel提供了大量的免费@font-face包这本质上是一键下载你需要的一切要使用自定义的、跨浏览器兼容的字体。每个工具包包括您需要的所有字体类型以及入门所需的演示HTML和CSS文件。
您所需要做的就是下载这个工具包，获取字体文件和CSS代码片段，然后就可以开始了!字体松鼠使用的CSS是基于Paul Irish的防弹@font-face语法如上所示，因此您可以确信，它是目前可用于确保尽可能多的用户遵从性的最佳方法。
@font-face装备发电机
如果FontSquirrel没有你需要的工具怎么办?没有问题。如果您有从其他来源获得的字体，只需在字体松鼠处停止即可@font-face装备发电机．
你只需要上传你的字体文件这个神奇的工具将自动转换为所有必要的文件类型并生成一个工具包供您下载。注意，使用@font-faceKit Generator意味着你保证你有权利/许可转换和嵌入你上传到网站的字体文件。这项服务是完全免费的，你可以使用零注册。
流行的@font-face服务
正如我在本文开头提到的，已经出现了一些提供免费和高级解决方案的服务@font-face的过程。下面列出了目前最流行的一些服务。
谷歌API的字体
的谷歌API的字体是在您的设计中插入自定义字体的最简单和最新的解决方案之一。使用此API，您只需从谷歌字体目录并获取一段代码以插入到< >头标签的HTML文档。然后，你可以在CSS中引用字体，就像你通常使用的其他字体一样@font-face需要CSS(它在幕后处理所有这些)。
谷歌字体目录中的所有字体都是免费和开源的。缺点是目前只有不到20种选择。谷歌字体API也没有包含SVG版本，所以目前还不支持移动设备。
TypeKit
TypeKit最早推出的服务之一是致力于制作的吗@font-face容易实现。TypeKit团队与来自世界各地的字体铸铸厂合作，提供数百种优秀的字体，只要你使用该服务，零授权并发症。有一个免费的试用计划，允许你在一个网站上使用有限数量的字体。
付费计划从每年24.99美元(两个网站)到每年99.99美元(不限数量的网站)不等。
Typotheque
Typotheque允许您购买任何他们的字体用于web使用。这项服务的好处是，不用按年付费，购买字体只需一次性付费。一旦你购买了你想要的字体，只需复制和粘贴提供的CSS，你就完成了!
字体生活
字体Live是另一个服务，照顾复杂的授权纠纷，同时为您带来数百个高质量的字体，从最好的设计师和铸造。在字体Live中，您可以单独购买每种字体，并支付每年的订阅费用。一旦您购买了字体，您就可以获得将字体嵌入到站点中所必需的简单代码片段。
克恩
Kernest系统几乎与谷歌Font API相同。只需找到一个你喜欢的字体，抓住链接嵌入到< >头标记，你就可以开始在CSS中使用这种字体了。Kernest有很多免费和高级字体可供选择。
不幸的是，Kernest.com上的浏览系统试图同时加载大量这些字体，因此会非常慢，难以使用。准备好浏览器崩溃，如果你偶然发现一个页面有太多的字体预览。
结束@font-face
你现在应该完全武装起来，开始在你的网页设计中使用漂亮的自定义字体。只需使用几行CSS和一个免费的web服务(或托管您自己的文件，如上所述)，您就可以生成自己的文件@font-face可以在大多数主流浏览器上工作的套件，实现起来不需要花一分钱。如果免费的解决方案没有提供足够的选择，考虑字体授权让你头疼，看看上面的服务，处理复杂的法律事务，甚至大部分代码，让你在网上使用高级字体非常简单。
