Parlez de l'application de polices Font Set dans Web Design_Experience Exchange

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>

Jetons un coup d'œil à la manière dont le navigateur affiche ce texte amélioré :

• Sous Windows : le navigateur commence la recherche à partir de la première police de la liste - Frankin Gothic Book existe dans le système et s'affiche en utilisant la police Frankin Gothic Book.
• Sous Mac : le navigateur lance la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - Lucida Grande. La police Lucida Grande existe dans le système, la recherche est terminée et la police Lucida Grande s'affiche.
• Certains systèmes : le navigateur commence la recherche à partir de la première police de la liste - Frankin Gothic Book n'existe pas dans le système et la recherche échoue. Continuez à chercher la police suivante - la police Lucida Grande n'existe pas non plus sur le système. Continuez à chercher la police suivante : la police universelle sans empattement. Le navigateur utilise sa police sans empattement par défaut « Arial » pour afficher ce texte.

Veuillez noter deux points. Tout d’abord, la police à laquelle correspond une famille de polices universelles est déterminée par le navigateur. Dans l'exemple ci-dessus, le navigateur a spécifié Arial comme police sans empattement, mais il est tout à fait possible qu'un autre navigateur ait spécifié Helvetica comme police sans empattement. La police qui sera finalement utilisée est imprévisible. Deuxièmement, une famille de polices universelle n’est qu’une solution d’appoint lorsque les autres polices du jeu de polices ne sont pas valides. Par conséquent - Les concepteurs doivent faire de leur mieux pour fournir un jeu de polices complet pour couvrir tous les systèmes autant que possible, et ne doivent pas s'appuyer sur des familles de polices universelles .

Les deux méthodes d'écriture similaires aux suivantes sont fausses :

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

L'erreur avec la première façon d'écrire est que cela équivaut à ne pas spécifier de police du tout, et c'est toujours au navigateur de sélectionner la police. Écrire équivaut à ne pas écrire.

L'erreur dans la deuxième manière d'écrire réside dans l'ordre. Parce qu'une famille de polices universelle ne devrait fonctionner que lorsque toutes les autres polices d'un jeu de polices sont désactivées. Par conséquent, placer la police spécifiée après la police universelle entraînera l'utilisation de la police universelle lorsque la police spécifiée ne lui correspond pas. Par conséquent, vous devez vous assurer que la police universelle est la dernière position dans le jeu de polices .

De plus, il y a deux choses à expliquer ici.

Tout d'abord, bien que les règles selon lesquelles les polices du jeu de polices sont utilisées par le navigateur semblent simples, elles sont en réalité très délicates. Je ferai des instructions spécifiques dans les prochains articles.

Deuxièmement, bien que le nom de la règle CSS de la police soit appelé font-family, il s'agit essentiellement d'un jeu de polices, et non d'une famille de polices au sens de l'impression. La famille de polices en impression fait référence à une série de combinaisons d'intensités différentes de la même police, telles que la famille Lucida (y compris Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande, etc.) et la famille Arial (Arial, Arial Black, Arial Rounded). MT, etc.) ), mais ces familles de polices ne conviennent évidemment pas pour être utilisées directement comme jeu de polices.

C'est tout pour aujourd'hui. La prochaine fois, nous parlerons davantage des familles de polices universelles.