字体家族 - Wikiwand
For faster navigation, this Iframe is preloading the Wikiwand page for 字体家族.

字体家族

维基百科,自由的百科全书

HTMLXHTMLfont facefont family 用于指定网页浏览器套用于某些文字的字型。该字型会用于在萤幕,或于打印机或其他装置显示。

字型的“font family”属性在 HTML 可以通过层叠样式表 (CSS) 或已淘汰的HTML中的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'; }

在 CSS,font-family (或 HTML 的 face) 包含一组相关的字型,名为“字族(font families)”。举例来说,Times 字族包含不同的大小、styles (比如 roman 和 italic(斜体)),以及重量(weight) (比如“常规 regular 和粗体 bold)。

通用字型

font-family 可使用特定的字型名称(比如 Heisei Mincho W9),但结果取决于安装在用户电脑的字型。实际结果要取决于用户的浏览器和电脑设定[1] 。举例来说,在 Microsoft Windows 中使用预设设定的 Firefox,会将 serifTimesTimes New Roman 显示,并将 sans-serifHelveticaArial 显示。

通常只有少数类型,包括 Cursive(手写体)[2]、Serif(衬线体)、Sans-serif(无衬线体)和 Monospace(等距)等可藉网页浏览器的“字型”设定修改。

字型 范例(视乎安装的字型)
Agency FB ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Antiqua ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Architect ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Arial ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
BankFuturistic ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
BankGothic ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Blackletter(哥德体) ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Calibri ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Comic Sans ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Courier ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Cursive(手写体) ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Decorative ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Fantasy ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Fraktur ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Frosty ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Garamond ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Impact ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Minion ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Modern ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Monospace(等距) ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Palatino ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Sans-serif(无衬线体) ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Serif(衬线体) ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Script ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Swiss ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Times ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Times New Roman ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Tw Cen MT ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
Verdana ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例

中文字型

大部分作业系统及网页浏览器皆由西方主导开发,大多预设并无配合中文字型的设定。本节示范如何以目标用户电脑预设内置的字型显示想要的结果,例如楷书在 Microsoft Windows 是标楷体中易楷体,在 Mac 是 BiauKai,在 Linux 是 UKai;明体/宋体在 Microsoft Windows 是新细明体中易宋体,在 Linux 是 UMing;黑体在 Microsoft Windows 是微软正黑体微软雅黑体中易黑体,在 Linux 是文泉驿正黑文泉驿微米黑思源黑体等等。

字型 范例(视乎安装的字型)
楷书 ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
明体/宋体 ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例
黑体 ABCDEFGHIJKLMNOPQRSTUVWXYZ A quick brown fox jumps over the lazy dog. 0123456789 中文字型范例

不过新版本的网页浏览器大多预设已将“Sans-serif”预设使用上述的“黑体”字型。

另见

注释

  1. ^ Fonts. W3.org. [2013-09-21]. 
  2. ^ 只少数网页浏览器提供,例如 Konqueror
{{bottomLinkPreText}} {{bottomLinkText}}
字体家族
Listen to this article