字体家族

网页上的字体设定,指定的是字体家族英语:,也译字族),对应排印学中的字体概念。一个字体家族包含多个字体(也叫字模;通用英语称,CSS称),字体之间以字重(粗细)、风格(正斜体)等设置区分开来。字体设定给定的是几个字族的列表,浏览器会依序尝试使用并配合其他设置找出对应的字体,用于显示或打印。

文本的“字族”一般是通过层叠样式表font-family属性指定,不过在(X)HTML中另可使用已淘汰<font>...</font>元素。在两种系统中,指定字族的都是一套由逗号分开的列表。除了真正存在的字族,也可以使用通用字族指定某一大类的字体。一般都建议在请求的字体列表末尾加入一个通用字族,以关照没有安装对应字体的用户。

.text { font-family: times, serif; font-size:14pt; font-style:italic; }
<p class="text">
以独立 CSS stylesheet 方式达成的范例文本。
</p>

<p style="font-family: times, serif; font-size:14pt; font-style:italic">
以 inline CSS 方式达成的范例文本。
</p>

<p><i><font face="times, serif" size="3">
以淘汰且从未进标准的 FONT 方式达成的范例文本。
</font></i></p>

若以 CSS 套用的字体名称当中有空格,应以引号(半角)括起。

.text { font-family: "calibri", Garamond, 'Comic Sans'; }

字族和字体

无论是在东方还是西方的信息系统,都有混淆字体(字族)和字体(字模)的历史,<font>...</font>元素的非标准“字族”选项称为意为“字体”的face正是一大例证。至于在CSS中两者偶尔混淆,基本上是因为字体文档内含的元数据没有把内置的字体标为某字体一员,而是给每个字体分立了一个字体。这样做又是因为较老的编辑器中字体选择往往只能选择四种字体(粗体开关、斜体开关),而字体的作者又想让这些编辑器可以找到所有字体。

因此,在较老的页面中,经常会看到诸如font-family: 'Gill Sans Extrabold', 'Heisei Mincho W9'此类直接指定字体名称的写法;相应语义正确但不一定能被识别的写法是font-family: 'Gill Sans', 'Heisei Mincho'; font-weight: 900。CSS2和CSS3的标准中从未对这种错误用法进行过提及,这本来也非浏览器或网页书写者应该负责的错误。

通用字族

字族选择中可以使用“通用字族”()指定某一大类的字体,至于选择成哪个则是取决于用户和系统的设定。[1] 举例来说,在 Microsoft Windows 中使用缺省设置的 Firefox,会将 serif 以 Times New Roman 显示,并将 sans-serif 以 Arial 显示。

不少浏览器允许用户修改通用字族对应的字族。通常只有Serif(衬线体)、Sans-serif(无衬线体)和 Monospace(等距)三种提供设置;极少数的浏览器(如Konqueror)也允许修改 Cursive(手写体)。

通用字族和字体置换()是两个不同的概念。前者替换的是模棱两可的名称,而后者是把有名的几个字体换成尺寸兼容的替代品。前者是由浏览器处理,而后者一般是由操作系统处理。Windows默认找不到Helvetica时用Arial顶替,找不到Times用Times New Roman顶替,都是字体置换的表现。[2]

下表为几个通用字族的范例。

字族设定示例结果(取决于系统设定)
Cursive(手写体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Fantasy(另类体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Monospace(等宽字体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Sans-serif(无衬线体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Serif(衬线体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
Fangsong(仿宋体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык

中文本型

中文本型和通用字族的对应情况为(可对照上表确认显示效果):

  • sans-serif:目前都正确对应到黑体。过去简体中文版Windows有将其对应到属衬线体的中易宋体的问题,但在Windows 8中已修正。
  • serif:一直以来都正确对应到明体/宋体
  • cursive:一般对应为楷书,但在Windows上设置的情况暂时不明。
  • fantasy:中文另类体在操作系统上无预装,因此无对应。
  • Fangsong:是专门用来对应仿宋体的类别,但浏览器支持还不完全。

过去的操作系统及网页浏览器皆由西方主导开发,缺乏配合中文本型的设置,需要手动指定字体列表。下表示范过去如何以目标用户电脑缺省内置的字体显示想要的结果,例如楷书在 Microsoft Windows 是标楷体中易楷体,在 Mac 是 BiauKai,在 Linux 是 UKai;明体/宋体在 Microsoft Windows 是新细明体中易宋体,在 Linux 是 UMing;黑体在 Microsoft Windows 是微软正黑体微软雅黑体中易黑体,在 Linux 是文泉驿正黑文泉驿微米黑思源黑体等等。

字体范例(视乎安装的字体)
楷书 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
明体/宋体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык
黑体 我能吃下玻璃 ABCDEFGHIJKLMNOPQRSTUVWXYZ The quick brown fox jumps over the lazy dog. 0123456789 αβγ عربي язык

如果通用字族可以正确对应,那就不该手动指定列表。手动指定列表的一大问题在于其费时费力:定表者需要研究多个操作系统的预装字体情况,才能得到一个本属“通用”范畴的字体列表,还会有被系统更新干扰的可能。

另见

注释

维基共享资源上的相关多媒体资源:字体家族
  1. . W3.org. [2013-09-21]. (原始内容存档于2019-05-14).
  2. . docs.microsoft.com. [2021-02-06]. (原始内容存档于2020-11-12) (美国英语).


This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.