Font family (HTML)

维基百科,自由的百科全书
跳转至: 导航搜索

HTMLXHTMLfont facefont family網頁瀏覽器套用於某些文字的字型。該字型會用於在螢幕,或於打印機或其他裝置顯示。

字型的「font family」屬性在 HTML 可以層疊樣式表 (CSS) 或已淘汰英语Deprecation的 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 中文字型範例

不過新版本的網頁瀏覽器大多預設已將「San-serif」預設使用上述的「黑體」字型。

另見[编辑]

注釋[编辑]

  1. ^ Fonts. W3.org. [2013-09-21]. 
  2. ^ 只少數網頁瀏覽器提供,例如 Konqueror