CSS保健室｜font

前言

font 是天天擅長的忍術，操縱捲軸來控制網頁文字的大小、粗細、樣式、字型等等，大多數屬性受到主流瀏覽器的支援，幾乎可以完全取代傳統 HTML 的 font tag 設計方式。

（ 圖片來源 ）

font

簡寫屬性在一個聲明中設置所有字體屬性。

可以按順序設置如下屬性：

1. font-style
2. font-variant
3. font-weight
4. font-size / line-height
5. font-family

@font-face

宣告自定義字型。

可以按順序設置如下屬性：

1. font-display

@font-face 於加載完成之前會先顯示或隱藏字型。

2. font-family

指定字型名稱，這個名稱會把原本在字型檔中的名稱覆蓋掉，在 CSS 中指定字型時都會以這個名稱為準，這樣的方式可以讓設計者自行定義名稱的命名方式，而不會受到原本字型名稱的干擾。

3. src

src 可用來指定字型檔案的位置，設計者可以一次指定多個字型檔案位置，最少要有一個，依照優先順序並以逗點分隔的方式一一指定，當瀏覽器需要載入字型檔的時候，就會依序從這裡所指定的位置嘗試進行載入，如果碰到不支援或無法連接的位置，就會自動跳過並嘗試下一個，直到取得正確的字型檔為止。

由於 SVG 格式的檔案可以包含多個字型，如果是使用 SVG 格式的字型檔，則在 URL 中就必須要指定出要使用 SVG 檔案中的哪一個字型，例如：

src: url(fonts.svg#simple); /* 使用 SVG 檔案中 id 為 'simple' 的字型 */

@font-face {
  font-family: Headline;
  src: local(Futura-Medium),
       url(fonts.svg#MyGeometricModern) format("svg");
}

在一個 @font-face 中使用類似 SVG 這樣可以包含多個字型的檔案時，一次只能使用其中一個字型，而要判斷使用者所指定的字型是哪一個，則是依據字型檔案中的 fragment identifier 來判斷，如果某些字型檔案沒有 fragment identifier ，則可以使用字型的順序來指定，例如 font-collection#1 就是指 font-collection 中第一個字型，以此類推，如果設計者沒有指定要使用的字型，則預設會直接使用檔案中的第一個字型。

local

指定字型名稱。會尋找 user 的電腦，如果有相同名稱的檔案，就不用從 server 下載，建議寫，可節省時間與流量。

對於 OpenType 與 TrueType 的字型而言， local() 中的名稱會用來比對 Postscript 名稱或是字形的完整名稱，至於會使用哪一種則會因為不同的平台或字型而有不同，所以設計者如果要讓自己的網頁字型在各種平台都可以顯示，最好將兩種名稱都指定上去：

/* Gentium 字型 */
@font-face {
  font-family: MyGentium;
  src: local(Gentium Bold),    /* 字型的完整名稱 */
       local(Gentium-Bold),    /* Postscript 名稱 */
       url(GentiumBold.woff);  /* 從網路下載 */
}

url

指定字型檔案的 URL 網址。

format

在使用 URL 網址指定字型檔時，除了必要的 url() 之外，還可以再加上一個選擇性的 format() 來告訴瀏覽器這個字型檔案的格式為何，如果瀏覽器發現它不支援該字型格式，就可以直接跳過這個字型，省去下載字型檔案的時間，如果沒有指定 format() 的話，瀏覽器就只能將字型下載之後才能進行判斷是否要使用該字型檔案。

下表是各種字型格式與 format() 指定方式的對應。

4. font-stretch

指定字型的字體收縮或拉伸。

5. font-style

指定字型的字體樣式。

6. font-weight

指定字型的字體粗細。

7. font-feature-settings

控制 OpenType 字型中的高階排版功能。

8. font-variation-settings

指定低級的 OpenType 或 TrueType 字體變形。

9. unicode-range

萬國碼（ unicode ）範圍，可提供給瀏覽器作為參考，來決定是否要下載該字型檔。

完整寫法：支援眾多瀏覽器

@font-face {
  font-family: 'MyWebFont'; /* 定義你的字型名稱 */
  src: url('webfont.eot'); /* IE9 Compat Modes  支援IE9才需要 */
  src: local('MyWebFont'), /* 如果user電腦已經有這個字型就用local的 */
       local('MyWebFont-Bold'), /* 可以指定多個local */
       url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

簡略寫法：支援大部分瀏覽器

@font-face {
  font-family: 'MyWebFont'; 
  src: local('MyWebFont'), 
       url('webfont.woff2') format('woff2'), /* 比較新的格式，找不到可省略 */
       url('webfont.woff') format('woff'), /* 和 ttf 至少要有一個 */
       url('webfont.ttf')  format('truetype'); /* 和 woff 至少要有一個 */
}

font-display

font-display 就跟遊樂園鬼屋一樣，在還沒走出去前，園方都可以選擇哪裡顯示鬼嚇人，哪裡要隱藏讓遊客喘口氣。

（ 圖片來源 ）

目前 IE 瀏覽器不支持 font-display 屬性。

font-display 設置字型於加載完成之前會先顯示或隱藏。

FOUT ( flash of Unstyle Text )

即設定的 @font-face 於加載完成之前會先顯示瀏覽器預設的字型，過往的瀏覽器預設多為此。

FOIT ( flash of Invisible Text )

即設定的 @font-face 於加載完成之前會先隱藏內容到字型加載完成後再跳出顯示，現今瀏覽器預設多為此。

不論是 FOUT 還是 FOIT 都有各自的優缺點，所以如何在這兩者中取得適當的平衡就是 font-display 的功能。

font-display 屬性：

auto

使用各瀏覽器自身的預設值，通常與 block 相似。

block

當字型加載完成前會先隱藏內容，直到自定義字型完全被加載完成後顯示。
瀏覽器會使用一個匿名且隱形的替代字型或者說是佔位符號，來短暫地代替原本的內容，直到字型下載好後立即交換，即 FOIT 。

swap

瀏覽器使用自身的預設字型（ 備用字型 ），直到自定義字型加載完成後切換，即 FOUT 。

fallback

介於 auto 與 swap 的中間值，瀏覽器會先短暫地隱藏內容，直到自定義的字型加載完成後再進行切換，但如果加載的時間過長，則使用瀏覽器的預設字型（ 備用字型 ）取代之。（ 等待加載時間約為 3 秒 ）

optional

行為模式與 fallback 相似，差別在於此值會自行判定是否要加載使用者的自定義字型，取決於使用用戶的網路環境，對於網速過慢、收訊較差的使用者來說相當合適，可以省去不必要的下載時間並順利地檢視內容。

以下是各值在自定義字型加載完成前所對應的隱藏時間與加載完成後切換字型的對應表，可以當作一個使用的參考：

font-stretch

指定字型的字體收縮或拉伸。

font-style

指定字型的字體樣式。

font-weight

指定字型的字體粗細。

font-feature-settings

font-feature-settings 是文字界劉謙，讓文字排版更加多變、絢麗，想知道它是怎麼變魔術的？那就繼續看下去吧！

（ 圖片來源 ）

font-feature-settings 控制 OpenType 字型中的高階排版功能，也就是可以讓 OpenType 字型排版更加精緻，符合實際開發需要， font-feature-settings 要想有作用，往往需要字型本身支援，因此多自定義字型中。

OpenType 字型特徵標籤非常多，可能有上百個，可以表現該標籤的字型也不同。（ 想了解更多請點我 CSS保健室｜font-feature-settings ）

ex.

.swsh { font-feature-settings: "swsh"; }

此功能將預設字元字形替換為相應的斜線字形。

（ 可以表現此特徵的字型： Adobe bickham-script 系列字型 ）

（ 圖片來源 ）

font-variation-settings

指定低級的 OpenType 或 TrueType 字體變形。

unicode-range

指定 @font-face 所定義的字型中，所涵蓋的萬國碼（ unicode ）範圍，這個資訊可提供給瀏覽器作為參考，來決定是否要下載該字型檔。

單一 codepoint（ U+416 ）

使用 1 至 6 位數的十六進位數字，指定一個 Unicode 的 codepoint 。

範圍區間（ U+400-4ff ）

使用連字線（ - ）與兩個 Unicode 的 codepoints 來指定一段範圍區間。

萬用字元（ U+4?? ）

使用萬用字元（ ? ）指定 codepoint 範圍。這裡的 ? 代表任何一個十六進位的數字。

可以使用逗點分隔的方式，結合多個範圍表示方式，例如：

@font-face {
  font-family: BBCBengali;
  src: url(fonts/BBCBengali.woff) format("woff");
  unicode-range: U+00-FF, U+980-9FF;
}

設計者可以利用多個 @font-face 與不同的萬國碼範圍，將一個字型區分為常用的區段與不常用的區段，讓瀏覽器只需要下載該網頁上需要的部份，這樣的作法可以節省一部分的網路傳輸量。例如：

/* 備用字型 - 大小：4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.woff);
  /* 沒有指定萬國碼區間，預設涵蓋所有的範圍 */
}

/* 日文 - 大小： 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.woff);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* 英文字型與一些符號等 - 大小： 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.woff);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

font-family

忍術有五行遁術，常用的通用字剛好也有五種，而施放術式都要通過結印了，設定網頁字體怎麼能馬虎呢？就讓我們來好好認識一下 font-family 吧。

（ 圖片來源 ）

font-family 規定元素的字體。

font-family 需要設定 family-name（ 字體名稱 ）和 generic-family（ 通用字體 ）， font-family 可以設定一種字體或多種不同的字體，每種字體間用半形逗號「 , 」隔開，當瀏覽器載入網頁樣式時，會從左邊第一個字體開始判斷，如果沒有對應的字體，就直接採用下一種字體，如果到最後都沒有可用的字體，就採用電腦預設字體，這時就可以透過 generic-family 來指定哪種預設字體。

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

上面這行 CSS ，字體名稱時不用加上雙引號，但如果你的字體名稱中間空格，就一定要加上雙引號。

generic-family 通用字

通用字會寫在 font-family 的最後面，作為最終的選項，當然不設定通用字也是可以，屆時將自動採用系統預設字體，也會導致不同作業系統顯示的結果有所不同。

常用的通用字有五種，分別是 sans-serif （ 無襯線體 ）、serif （ 襯線體 ）、 monospace （ 等寬體 ）、cursive （ 手寫體 ）和 fantasy （ 幻想體 ）。

襯線體 serif 、無襯線體 sans-serif

襯線 serif 指的是字形筆畫末端的裝飾部分，因為 sans 在法語中代表「 無 」，所以 sans-serif 也就是無襯線體，與襯線字體相反，無襯線體完全拋棄裝飾襯線，只剩下主幹。

襯線體 serif

Windows 和 Mac 都支援的英文襯線字體： Georgia 、 Times New Roman 、 Times

字體	範例
Georgia
Times New Roman
Times

無襯線體 sans-serif

Windows 和 Mac 都支援的英文無襯線字體： Arial 、 Arial Black 、 Arial Narrow 、 Impact 、 Trebuchet MS 、 Tahoma 、 Verdana

字體	範例
Arial
Arial Black
Arial Narrow
Impact
Trebuchet MS
Tahoma
Verdana

等寬體 monospace

等寬字體表示所有的字母、數字都是同樣的寬度，對於中文而言，每個字在設計上大多都是等寬，但英文例如說 W 和 i 的寬度就差很多，這也造成有時在排版上的一些困擾，如果指定 monospace ，就會自動套用系統預設的等寬字體。

等寬體 monospace

Windows 和 Mac 都支援的英文等寬字體： Courier New

字體	範例
Courier New

手寫體 cursive 、幻想體 fantasy

手寫體和幻想體其實有點像，手寫體就比較像是毛筆或鋼筆寫出來的感覺，以中文來說預設的手寫體通常就是標楷體，而幻想體就是在手寫之外，更多了一些裝飾或紋路在字體上頭，大多數的中文預設不支援幻想體，會自動使用襯線體或無襯線體取代。

手寫體 cursive

Windows 和 Mac 都支援的英文手寫字體： Comic Sans MS

字體	範例
Comic Sans MS

幻想體 fantasy

Mac 支援的英文幻想字體： Copperplate 、 Papyrus

字體	範例
Copperplate
Papyrus

常用的中文字體

部分瀏覽器使用上可以用中文，但保險起見，最好是使用英文名稱或是中英文一起使用。

Windows

字體	範例
微軟正黑體（ Microsoft JhengHei ）
新細明體（ PMingLiU ）
標楷體（ DFKai-SB ）

Mac

字體	範例
蘋方（ PingFang ）
黑體（ STHeiti ）
楷體（ STKaiti ）
儷黑 Pro （ LiHei Pro ）
儷宋 Pro （ LiSong Pro ）

font-kerning

font-kerning 調整英文字元形狀的間距。

IE 不支持該屬性， Safari 和 Chrome 支持替代的 -webkit-font-kerning 規則。

1. 一般中文是無效的，中文漢字本身就是方方正正，一般沒有必要用到字距調整，除非是行書或者草書或者一些手寫體字型。
2. 必須是具有字距調整資訊的 OpenType 字型才有用，如果字型檔案沒有字距調整資訊或者不是 OpenType 字型都是沒效果的。
3. font-kerning 的字距調整並不是所有字元都有效的，如果希望所有字元間距都有調整，應該使用 CSS 屬性 letter-spacing 。

font-kerning 有以下屬性：

font-size

font-size 可設置字級大小。

特別要注意的是 smaller 、 larger 、 % 、 inherit 都是跟父層有關， smaller 是比父層更小的 size ， larger 是比父層大一點的 size ， % 是以父層的為基準的百分比大小， inherit 則是繼承自父層的文字大小。

CSS 文字單位

em

em 隨著外圍的文字大小調整。調整外圍的 font-size ，就可以影響到內部的文字大小，但是要注意，如果外層也有設定 em 它也會繼承下去。

rem

rem 和 em 用法類似，但是不會繼承，只會受最根部 html 的 font-size 單位影響， body 以下的都不會影響。

vw

代表的是 view width ，也就是螢幕可視範圍寬度的百分比。
如果填的是 30vw ，表示這個 div 要占我的可視範圍的 30% ，而它會隨著你的網頁縮放而改變。

vh

代表的是 view height ，也就是螢幕可視範圍高度的百分比。
如果填的是 30vh ，表示這個 div 要占我的可視範圍的 30% ，而它會隨著你的網頁縮放而改變。

vmin 和 vmax

vmin ，這個的意思是幫我抓取「 長或寬較小的那個的百分比 」，另一個相對的 vmax 意思就是抓取「 長或寬較大的那個的百分比 」。

font-size-adjust

目前只有 Firefox 瀏覽器支持 font-size-adjust 此屬性。

當元素字級不可用時，定義字級的 aspect 值比率，瀏覽器默認情況下會有最小字級，若要更小的字級時則可使用此屬性。

字體的小寫字母 " x " 的高度與 " font-size " 高度之間的比率被稱為一個字體的 aspect 值。當字體擁有高的 aspect 值時，那麼當此字體被設置為很小的尺寸時會更易閱讀。舉例： Verdana 的 aspect 值是 0.58 （ 意味著當字體尺寸為 100px 時，它的 x-height 是 58px ）。 Times New Roman 的 aspect 值是 0.46 。這就意味著 Verdana 在小尺寸時比 Times New Roman 更易閱讀。

font-stretch

可對當前的 font-family 進行伸縮變形。

font-style

font-style 定義字體的風格。

italic 和 oblique 都是向右傾斜的文字，對於沒有斜體字體的瀏覽器改為使用 oblique 屬性值來實現傾斜的文字效果，比如 font-family: Georgia, serif 時，指定 font-style: italic ，則瀏覽器使用 Georgia Italic ，若 font-family: Microsoft YaHei, sans-serif 時指定 font-style: italic ，因為微軟雅黑沒有 italic 或 oblique 變體，瀏覽器只得將 regular 變體傾斜以自動合成仿 oblique 。

font-variant

將英文字母變大寫，而且字體縮小。

舉例輸入 Font-Variant: Small-caps; 會變下面的樣子，大寫沒變但小寫變成小型大寫字。

font-weight

設置文本的粗細。

參考資料

1. CSS font 属性
2. CSS @font-face 用法概要
3. CSS 網頁字型 @font-face 使用教學與範例
4. 使用 font-display 改善與優化網站效能
5. CSS font-stretch 属性
6. CSS font-style 属性
7. CSS font-weight 属性
8. CSS font-feature-settings 50+關鍵字屬性值完整介紹
9. CSS font-family 詳細介紹
10. 了解CSS属性font-kerning,font-smoothing,font-variant
11. CSS 透過 font-size 屬性設定文字大小
12. CSS font-size-adjust 属性
13. CSS font-stretch 属性
14. CSS3 font-stretch 屬性
15. oblique 字体和 italic 字体在 CSS 样式中有什么差别？
16. CSS font-style中italic和Oblique有何區別
17. CSS font-variant 属性
18. CSS font-weight 属性
19. CSS font 文字屬性