使用文本和 @font face设置多种字体-face 规則代替图像中的文本可带来许多优势:
文本加载速度比图像更快。
HTML 和 CSS 格式化的文本比图像中的文本更容易更新
在页面上的文夲中包含关键词而不将它们隐藏在图像中,可改进您的搜索引擎排名
使用文本代替图像,可让您的网页更容易供使用屏幕阅读器或其他特殊浏览器的任何残疾人士访问
文本是可选择和可缩放的。
使用 @font face设置多种字体-face 规则初看起来非常简单从本质上看,它只需要两个步骤首先,使用 @font face设置多种字体-face 规则链接到在一个
Web 服务器上托管的字体 然后,在 CSS 规则中的 font face设置多种字体-family 属性中使用该字体 非瑺简单。
知道这些基本说明后您很容易认为可将硬盘上的任何字体上传到
Web 服务器,通过 @font face设置多种字体-face 规则链接到它这样就足够了。不幸的是就像网络上如此多的内容一样,在网页中托管和使用字体比预期要复杂一些
– 原因可能比您想象的更多
首先,字体设計人员拥有字体版权
– 我并不是说这有任何不对它只是让事情复杂化。如果希望更多地了解获取字体版权的复杂性以及为什么至少一位 Web 设计人员已因生成 Web
让情况变得更复杂的是,即使您拥有权利在服务器上托管一种字体您也可能没有该字体在
Mac 和 Windows 计算机上正确显示芓母或在所有 Web 浏览器中运行所需的所有变体。
所有这些因素共同导致了托管您自己的
但并非所有字体服务的原理都是相同的
确實,这 3 种流行的服务采用极其不同的方法将字体提供给 Web 设计人员 font face设置多种字体 Squirrel 支持您下载字体,然后将它上传到您自己的 Web
服务器上(它們为您管理版权问题和字体选项) Google Web font face设置多种字体s 让链接到在其服务器上托管的字体变得很简单。 Typekit
采用了一种非常不同、更加复杂的方法我将在本文末尾介绍。
我在观察中发现Web
设计人员对使用 @font face设置多种字体-face 规则的许多混淆偏离了这样一个事实:大部分流行的字体服務都采用了不同的方法来管理
Web 字体,并且您在网页中使用这些字体的步骤也不同这正是我单独介绍每种字体服务的原因。
本教程的目标是首先帮助您理解在字体服务方面的选择范围,然后提供有关如何使用它们的基本说明以便您可就哪项服务最适合您而做出更精奣的决策。
目前可用的字体服务比我能用一篇文章介绍的要多得多所以我选择重点介绍
理解这 3 种服务的工作原理后,您应对总体概況有一个很好的了解并且已准备好对市面上的任何其他字体执行精明的评估。
字体服务这并非因为它是最优秀的,而是因为它最容易使用 – 并且是免费的如果预算有限,并且您无需在一个庞大的字体集合中进行选择Google Web
font face设置多种字体s 支持向您的网站轻松添加一些新的字體选项。
需要注意一些限制
Google 的 Web 字体全部是免费字体,很少有字体提供多于一种字体样式如果希望使用各种不同的字体样式,最好選择 Typekit 或 font face设置多种字体
Google 的托管字体服务时您会链接到 Google 服务器上的字体。 尽管 Google
的服务器非常可靠但如果他们的服务器宕机,您漂亮的字体僦会无法使用此时会采用老式的默认字体来显示您的文本。