Sprechen Sie über die Schriftartenanwendung „Font Set' im Webdesign_Erfahrungsaustausch

Hihi, 大家好~  最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小，但是却是前端开发中的基本，因为目前的网页，还是以文字信息为主，而字体，作为文字表现形式的最重要参数之一，自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段，却不明白为什么这样设置，这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。

- font-family

大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档，却没有发现任何能指定某一个特定字体的规则。

想想十年前，你可以随处看见类似于这样的代码：

<font face="Frankin Gothic Book">Lorem Ipsumfont>

几乎不会有人考虑到，Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果，系统因为找不到这种字体，就改用Mac的默认字体显示了。于是，网页的风格就和原来完全不一样了，根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表；浏览器从列表头部开始匹配，知道找到第一个可用的字体，并使用该字体进行显示。

比如上面这个例子，我们可以创建这样的一个font set：

<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsumspan>

我们来看看浏览器怎么来呈现这段文字吧：

• Windows下：浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book，使用Frankin Gothic Book字体显示。
• Mac 下：浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book，搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体，终止搜索，并用Lucida Grande字体显示。

这样在Mac上，Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。

但是可能存在一台电脑，上面既没有Frankin Gothic Book字体，也没有Lucida Grande字体，那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统，导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”，也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个，以及一些其他的通用字体族。在这里，我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下，浏览器指定的一种最终的代用字体”。

比如我们在改进一下上面的那段示例文字：

<span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsumspan>

Sehen wir uns an, wie der Browser diesen verbesserten Text darstellt:

• Unter Windows: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste – Frankin Gothic Book ist im System vorhanden und wird mit der Schriftart Frankin Gothic Book angezeigt.
• Unter Mac: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste – Frankin Gothic Book ist nicht im System vorhanden und die Suche schlägt fehl. Suchen Sie weiter nach der nächsten Schriftart – Lucida Grande. Die Schriftart Lucida Grande ist im System vorhanden, die Suche wird abgebrochen und die Schriftart Lucida Grande wird angezeigt.
• Einiges System: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste – Frankin Gothic Book ist im System nicht vorhanden und die Suche schlägt fehl. Suchen Sie weiter nach der nächsten Schriftart – die Schriftart Lucida Grande ist ebenfalls nicht auf dem System vorhanden. Suchen Sie weiter nach der nächsten Schriftart – der universellen serifenlosen Schriftart. Der Browser verwendet zur Anzeige dieses Textes seine standardmäßige serifenlose Schriftart „Arial“.

Bitte beachten Sie zwei Punkte. Welcher Schriftart eine universelle Schriftfamilie entspricht, bestimmt zunächst der Browser. Im obigen Beispiel hat der Browser Arial als serifenlose Schriftart angegeben, es ist jedoch durchaus möglich, dass ein anderer Browser Helvetica als serifenlose Schriftart angegeben hat. Welche Schriftart letztendlich verwendet wird, ist nicht vorhersehbar. Zweitens ist eine universelle Schriftfamilie nur eine Ersatzlösung, wenn andere Schriftarten im Schriftartensatz ungültig sind. Deshalb - Designer sollten ihr Bestes geben, um einen vollständigen Schriftsatz bereitzustellen, der alle Systeme so weit wie möglich abdeckt, und sollten sich nicht auf universelle Schriftfamilien verlassen .

Zwei Schreibweisen ähnlich der folgenden sind falsch:

<span Stil="font-family:sans-serif" >Lorem Ipsumspan>
<span Stil="font-family:sans-serif,Arial"> Lorem Ipsumspan>

Der Fehler bei der ersten Schreibweise besteht darin, dass sie gleichbedeutend damit ist, überhaupt keine Schriftart anzugeben, und es dennoch dem Browser überlassen bleibt, die Schriftart auszuwählen. Schreiben ist gleichbedeutend mit Nichtschreiben.

Der Fehler bei der zweiten Schreibweise liegt in der Reihenfolge. Denn eine universelle Schriftfamilie sollte nur funktionieren, wenn alle anderen Schriftarten in einem Schriftartensatz deaktiviert sind. Wenn Sie daher die angegebene Schriftart nach der universellen Schriftart platzieren, wird die universelle Schriftart verwendet, wenn die angegebene Schriftart nicht mit ihr übereinstimmt. Daher sollten Sie sicherstellen, dass die universelle Schriftart die letzte im Schriftartensatz ist.

Außerdem gibt es hier zwei Dinge zu erklären.

Obwohl die Regeln, welche Schriftarten im Schriftartensatz vom Browser verwendet werden, einfach erscheinen, sind sie in Wirklichkeit sehr knifflig. Ich werde in zukünftigen Artikeln spezifische Anweisungen geben.

Zweitens: Obwohl der CSS-Regelname der Schriftart „font-family“ heißt, handelt es sich im Wesentlichen um einen Schriftartensatz und nicht um eine Schriftartenfamilie im Sinne des Drucks. Als Schriftfamilie im Druck bezeichnet man eine Reihe unterschiedlicher Intensitätskombinationen derselben Schriftart, beispielsweise die Lucida-Familie (einschließlich Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande usw.) und die Arial-Familie (Arial, Arial Black, Arial Rounded). MT usw.), aber offensichtlich sind diese Schriftfamilien nicht für die direkte Verwendung als Schriftsatz geeignet.

Das war's für heute. Das nächste Mal werden wir mehr über universelle Schriftfamilien sprechen.