浏览器如何管理字体

2021年2月24日05:18:10 发表评论 24 次浏览

上个月我写了 "版式101:基础知识"解释了一般排版的基本方面。在本文中, 我将探讨Web浏览器上的排版。换句话说, 浏览器如何精确地处理字体?

Web安全字体

首先, 我要解决网络安全字体。在上一篇文章中, 我简单地提到存在网络安全字体, 并且所有浏览器都将显示某些字体, 而其他浏览器则不会。要了解这一点, 我们需要了解浏览器在何处获取字体。在大多数情况下, 浏览器会从本地目录中直接从计算机上已安装的字体中提取字体。由于某些字体(据说是)捆绑在Windows, Mac OS X和Linux的所有版本中, 因此这些字体被视为"网络安全"。这意味着无论你使用什么计算机, 浏览器都将始终定位特定的字体。

关于某些字体是否真正"网络安全"存在一些分歧, 我将在短期内解决。用于确定字体是否为网络安全的重要资源是Font Tester。它不仅为你提供了用于测试和预览字体的Web界面, 还为你提供了Web安全字体的列表。

字体测试器是检查字体是否“网络安全”的好资源。

字体测试器是检查字体是否"网络安全"的好资源。

字体堆叠

请注意, 在谈论操作系统一致的字体时, 我"应该"包括在内。这是因为操作系统之间存在一些字体差异。但是浏览器是专门为处理这种情况而设计的, 并使用字体系列来实现跨系统字体。经典的例子是Arial和Helvetica。大多数(如果不是全部)Windows计算机都安装了Arial字体。同样, 大多数(如果不是全部)Mac计算机都安装了Helvetica字体。出于Web安全字体的目的, Arial和Helvetica可通过浏览器互换。在大多数情况下, 如果网页正在请求Arial, 而浏览器无法在用户的计算机上找到它, 则浏览器会自动替换Helvetica。当用户只有Arial时, 请求Helvetica的页面也是如此。

这就是"字体堆叠"变得非常重要的地方。在Font Tester的网络安全字体列表中, 列表中的大多数行至少包含两种字体, 后接衬线, 无衬线或等宽字体(字体字符之间的固定宽度), 即字体分类。这称为字体堆叠。本质上, 浏览器将字体的每个序列视为第一个字体选择, 第二个字体选择, 第三个字体选择, 等等。如果浏览器无法找到序列中的任何字体, 则它将恢复为默认的衬线字体, 无衬线字体或等宽字体, 具体取决于所使用的字体分类。

字体栈不仅可以用于确保浏览器最终显示可接受的字体, 还可以用于更多用途。前面我也提到过, 对于某些字体是否可以被认为是网络安全的, 存在一些分歧。例如, 大部分操作系统使用的字体是Century Gothic。但是, 百分之十到百分之二十之间没有。因此, 你可以创建一个字体堆栈, 首先选择Century Gothic, 然后是Arial, Helvetica, 最后是sans-serif通用分类。 (在CSS中, 我应该注意, 标题中带有多个单词的字体需要放在引号中。)

font-family: "Century Gothic", Arial, Helvetica, sans-serif;

这将告诉浏览器首先寻找Century Gothic字体。由于大部分系统都使用此字体, 因此大多数观众会看到使用Century Gothic显示的站点。对于没有Century Gothic的观众, 浏览器将首先回落到Arial, 然后回落到Helvetica, 最后回落到无衬线的替代方案

###字体堆叠准则

字体堆叠是自定义网站字体的一种好方法, 但需要注意一些事项。首先, 请确保整个堆栈具有一定的一致性。至少, 你希望堆栈中的字体是全衬线, 无衬线或等宽字体。拥有运行Arial, " Times New Roman", " Lucida Console"(无衬线)之类的字体栈不是一个好习惯。这不仅会忽略一致性, 而且你的站点对于在系统上安装了不同字体的查看者来说将完全不同。而是选择看起来相似的字体, 以使你的网站看起来一致, 而不考虑查看器的安装字体。另外, 堆栈中的字体不应该看起来相似;他们也应该有相似的规模。避免以堆叠形式使用从宽到窄的字体, 即使它们看起来相似。

![在字体堆栈中使用不同宽度的字体可能会导致显示差异。](/ wp-content / uploads / images / 0003/7433 / font_stack.png)

在字体堆栈中要避免的另一件事是使用太多的字体。虽然没有什么技术可以阻止你将20种字体堆叠在一起, 但这不是一个好习惯。字体堆栈中没有多少字体没有"黄金法则"。一些设计师说可以接受四到六种字体, 而其他设计师则建议六到十种字体。真的取决于你。

最后, 也许是最重要的一点, 始终在字体堆栈的末尾包含通用字体系列。如果浏览器在你的堆栈中没有其他字体, 则这是浏览器的最后选择。

###使用不是网络安全的字体

既然我们已经介绍了浏览器在哪里获取字体以及如何构建字体堆栈, 下面让我们看一下如何使用那些不被认为是网络安全的字体。

在继续之前, 我必须添加一个免责声明。尽管有几种方法可以使浏览器显示非Web安全字体。方法因浏览器和浏览器版本而异。无论使用哪种方法, 许多较旧的浏览器根本不会显示非Web安全字体。但是, 因为我们现在知道如何创建字体堆栈, 所以我们可以添加"后备"字体来呈现较旧的浏览器, 而不是在堆栈中添加非Web安全字体。

尽管有几种方法可以使浏览器呈现其他字体, 但我仅讨论[@ font-face](http://www.font-face.com/)CSS方法。这是一种非常简单但功能强大的方法, 只需几行CSS代码即可在你的网站上使用其他字体。

以最简单的形式, @ font-face CSS代码如下所示:

@font-face {
    font-family: DemoFont;
    src: url('DemoFont.ttf');
}

在这种情况下, " demofont.ttf"存储在你网站的根目录中。此CSS代码已添加到样式表中, 以将字体系列" demofont"包括到浏览器可用的字体选项列表中。插入此代码后, 你可以像使用网络安全字体一样设置字体堆栈, 但是现在包括新的" demofont"。

font-family: DemoFont, Arial, Helvetica, sans-serif;

当使用@ font-face或任何其他字体替换方法时, 使用后备字体变得更加重要, 因为在特定的浏览器上不生成字体的可能性更大。

@ font-face方法是在网站上包含其他字体的好方法。

@ font-face方法是在网站上包含其他字体的好方法。

@ font-face跨浏览器使用

不同的浏览器对显示非Web安全字体的反应不同, 不幸的是, 浏览器对使用@ font-face的反应也不同。每个主流浏览器都使用@ font-face支持不同的字体类型。 Internet Explorer仅接受EOT字体, 而Firefox仅支持OTF和TTF字体, 依此类推。幸运的是, 感谢Paul Irish的帮助, 我们无需为此担心防弹@ font-face语法.

无需过多讨论技术细节, Bulletproof @ font-face语法使用CSS代码来包含字体的所有版本, 并根据哪种浏览器呈现字体来选择一个版本。你可以选择探索爱尔兰语法的技术方面, 并自行找到字体。但是, 我将跳过此步骤, 而推荐使用一种更简单的方法:通过Font Squirrel将@ font-face与Bulletproof语法一起使用。

字体松鼠

字体松鼠是查找美观且免费用于商业用途的字体的绝佳站点。它还具有@ font-face套件随附的数百种字体, 这些字体包括每种浏览器所需的每种字体版本, 以及包含所有必需的@ font-face代码的.css文件。

同样, 你可以自己探索爱尔兰的Bulletproof @ font-face语法, 并找到所有自己的许可字体。或者, 你可以走轻松的道路并使用Font Squirrel。

Font Squirrel是免费的商业字体的不错资源。

Font Squirrel是免费的商业字体的不错资源。

包起来

尽管目前在浏览器中没有显示非网络安全字体的标准, 但了解浏览器如何处理字体应有助于你自定义网站字体-在创建此类标准之前。

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: