Bercakap tentang aplikasi fon Set Font dalam reka bentuk web_Pertukaran pengalaman

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>

Mari kita lihat cara penyemak imbas memaparkan teks yang dipertingkatkan ini:

• Di bawah Windows: Penyemak imbas mula mencari dari fon pertama dalam senarai - Frankin Gothic Book wujud dalam sistem dan dipaparkan menggunakan fon Frankin Gothic Book.
• Di bawah Mac: Penyemak imbas mula mencari dari fon pertama dalam senarai - Frankin Gothic Book tidak wujud dalam sistem dan carian gagal. Teruskan mencari fon seterusnya - Lucida Grande. Fon Lucida Grande wujud dalam sistem, carian ditamatkan dan fon Lucida Grande dipaparkan.
• Sesetengah sistem: Penyemak imbas mula mencari dari fon pertama dalam senarai - Frankin Gothic Book tidak wujud dalam sistem dan carian gagal. Teruskan mencari fon seterusnya - fon Lucida Grande juga tidak wujud pada sistem. Teruskan mencari fon seterusnya - fon universal sans-serif. Penyemak imbas menggunakan fon sans-serif lalainya "Arial" untuk memaparkan teks ini.

Sila ambil perhatian dua perkara. Pertama sekali, fon yang sepadan dengan keluarga fon universal ditentukan oleh penyemak imbas. Dalam contoh di atas penyemak imbas menentukan Arial sebagai fon sans-serifnya, tetapi kemungkinan besar penyemak imbas lain menentukan Helvetica sebagai fon sans-serifnya. Fon mana yang akan digunakan akhirnya tidak dapat diramalkan. Kedua, keluarga fon universal hanyalah penyelesaian drop-in apabila fon lain dalam set fon tidak sah. Oleh itu - Pereka bentuk harus mencuba yang terbaik untuk menyediakan set fon lengkap untuk merangkumi semua sistem sebanyak mungkin, dan tidak harus bergantung pada keluarga fon universal .

Kedua-dua kaedah penulisan yang serupa dengan yang berikut adalah salah:

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

Kesilapan dengan cara penulisan pertama ialah ia sama dengan tidak menyatakan fon sama sekali, dan ia masih diserahkan kepada penyemak imbas untuk memilih fon. Menulis adalah sama dengan tidak menulis.

Kesilapan dalam cara penulisan kedua terletak pada susunan. Kerana keluarga fon universal hanya sepatutnya berfungsi apabila semua fon lain dalam set fon dilumpuhkan. Oleh itu, meletakkan fon yang ditentukan selepas fon universal akan menyebabkan fon universal digunakan apabila fon yang ditentukan tidak sepadan dengannya. Oleh itu, anda harus pastikan fon universal ialah kedudukan terakhir dalam set fon .

Selain itu, terdapat dua perkara untuk dijelaskan di sini.

Pertama sekali, walaupun peraturan fon dalam set fon digunakan oleh penyemak imbas kelihatan mudah, ia sebenarnya sangat rumit. Saya akan membuat arahan khusus dalam artikel akan datang.

Kedua, walaupun nama peraturan CSS fon dipanggil font-family, pada asasnya ia adalah set fon, bukan keluarga fon dalam erti kata percetakan. Keluarga fon dalam percetakan merujuk kepada satu siri gabungan keamatan berbeza muka taip yang sama, seperti Keluarga Lucida (termasuk Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande, dll.) dan Keluarga Arial (Arial, Arial Black, Arial Rounded MT, dsb.) ), tetapi jelas sekali keluarga fon ini tidak sesuai digunakan secara langsung sebagai set fon.

Itu sahaja untuk hari ini. Lain kali kita akan bercakap lebih lanjut tentang keluarga fon universal.