《精通CSS》第4章 網頁排版

或許大家會覺得排版都是設計師的工作，前端開發按照已經排版好的設計稿復原就行。當然，這樣理解也沒有太大問題，但是過於依賴於設計師往往會限制我們的腳步。作為前端開發，對於排版我們要有自己的認知，而且更好地理解 CSS 中關於網頁排版的技術，我們也能更得心應手地還原設計稿。

本章原書用了近 40 頁的篇幅來介紹排版，歪馬會盡量精簡地將其中的核心內容傳達給大家。

同原書，藉助維基百科中一篇關於月亮的文檔來給大家介紹排版。分別包括以下幾部分內容：

  1. 基礎排版：包括文本顏色、字體相關、間距、對齊、折行連字符等
  2. 文本特效
  3. 多欄布局
  4. 更豐富的字體：Web 字體
  5. 高級的排版特性：OpenType

其中比較推薦大家關注的點有對於行盒子構造的理解、連字符的使用、Web 字體的使用以及 OpenType 新排版特性。

示例代碼託管在CodeSandbox[1]

4.1 基礎排版

如下圖所示，我們沒有應用任何樣式時，網頁也並沒有很糟糕，還是可讀的，主要是因為瀏覽器應用了一些默認的樣式。

初始文檔-未應用樣式

下面我們開始逐步美化這一文檔，在這個過程中，歪馬不會挨個貼出效果圖，這樣太浪費篇幅了，有興趣的同學可以自己動手跟着試一試。下面先看一下完成版的效果圖。

完成效果圖

4.1.1. 文本/背景顏色

首先我們可以微調一下文本的顏色。默認情況下，瀏覽器會將文字渲染成黑色（鏈接為藍色），背景為白色，白底黑字有時候太過與顯眼。我們可以調整下字體顏色/背景顏色，使其看起來更柔和。

如下：

body { background: #f6fafc; }  p { color: #3b4348; }  a { color: #235ea7; }

4.1.2. 字體族

第二步可以給文檔應用我們喜歡的字體。可以藉助font-family字體族屬性，該屬性的值是一個備選字體的列表，按優先級從左到右排列。如下：

body {    font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif;  }  h1, h2, h3, h4, h5, h6 {    font-family: Avenir Next, Avenir, SegoeUI, arial, sans-serif;  }

由於font-family是一個可繼承屬性，所以body及其後代元素在使用字體時，瀏覽器會依次從左向右判斷字體是否存在，存在則使用，一直到都不匹配時，隨機選擇一種襯線字體(serif)。

這種按照順序查找字體的後備機制是font-family的重要特性，因為不同的操作系統和移動設備中包含的字體並不一樣。關於什麼操作系統中默認安裝了哪些字體，可以通過這個網址查詢：https://www.cssfontstack.com[2]。

上面代碼中的最後一種備選字體(襯線字體)是通用字體族的一種。通用字體族共有以下幾種：

  • serif 襯線字體：字形筆畫末梢帶有裝飾性的線條，很多經典的英文字體都有。
  • sans-serif 非襯線字體：與襯線字體對應，字形筆畫末梢沒有裝飾性的線條。
  • monospace 等寬字體: 每個字符的寬度一樣，不同行之間的字符可以完美對齊，常用於顯示代碼。
  • fantasy 花式字體：顧名思義，就是比較花花繞的字體。
  • cursive 手寫字體：手寫字體。

歪馬將 Orbit 軌道部分的兩個段落分別應用的fantasy花式字體和cursive手寫字體，大家可以感受下。Safari 下效果比較顯著，所以該圖是 Safari 下的截圖。如圖：

花式字體與手寫字體

最後，如果字體族的名稱包含空格，引號並非非加不可，但最好加上。規範中只要求與通用字體族重名的字體族需要加引號，但同時也建議給包含非標準符號的名稱加引號，從而防止瀏覽器誤判。

4.1.3. 字體大小與標題行外邊距

幾乎所有瀏覽器中，font-size的默認大小都是16px，除非主動修改。

在這裡，我們不修改默認的font-size，在設置指定元素的font-size時，推薦使用em，如下：

h3 {    font-size: 1.314em; /* 21px */  }

使用em比較靈活，em單位是基於繼承的字體大小進行縮放的。所以當我們修改默認的font-size大小時，相應的元素大小也會隨之調整。

不過這樣做會有一個問題，元素的位置會意外改變其字體大小。試想如下代碼：

p {    font-size: 1.314em;  }  article {    font-size: 1.314em;  }

p和article元素默認情況下字體大小是21px，但article下的p元素的字體大小會變成1.314em × 1.314em，約等於1.73em（28px）。

對於font-size屬性，可以用百分比代替em。如131.4%與1.314em沒有區別，可以任意選擇。

當em用於計算盒模型大小時，不是基於繼承的font-size，而是基於元素自身計算後的font-size。

如上em的計算規則會因為應用屬性的不同而不同。我們還可以rem，它也是一個縮放因子，它是相對於根元素的字體大小進行縮放的。

rem較新，但所有現代瀏覽器均已支持，只有 ie8 及更早的瀏覽器不支持。為了兼容，我們可以如下為標題元素聲明統一的上外邊距：

h1, h2, h3, h4, h5, h6 {    margin-top: 24px; /* 針對老舊瀏覽器不能縮放的後備 */    margin-top: 1.5rem;  }

書中推薦使用em/rem這兩個縮放單位，其他的長度單位，如mm/cm/in/pt這些絕對物理長度，這些是給打印樣式準備的，網頁樣式不應該使用這些單位。

4.1.4. 行高與垂直對齊

要像徹底了解行高與垂直對齊。我們需要先了解下行盒子的構造。構造如下圖（書中圖 4-5），大家可以仔細看看各部分的含義。

行內格式化模型的構造及相關概念

對應代碼是：

<p>The <strong>Moon</strong>...</p>

關於行內格式化上下文，我們知道每行文本都會生成一個行盒子，這段代碼中，行盒子內包含行內盒子(strong元素)以及前後的匿名行內盒子。

內容區用於顯示文本，用font-size決定高度。行高是行盒子的總高度，內容區上下的空白部分叫做半鉛空（因為傳統印刷時用鉛塊隔開的）。

其中，每個字符在擺放的時候，底邊都是對齊於靠近底部的一條水平線，這條線叫做基線。內容區並不會完全限制字符的顯示，比如某些字體中g就會超出內容區。

最後，如果行盒子內有多個行高不等的行內盒子，則行盒子最後的高度至少等於最高的。至於為啥是至少，還和垂直對齊的方式有關，下面說垂直對齊的時候就知道了。

1. 設置行高

一般來說，行高的取值範圍是1.2~1.5。行與行之間不能太密也不能太疏。

如下，我們可以給body設置line-height: 1.5;。

body {    line-height: 1.5;  }

沒有單位的行高，表示是當前字體大小的 1.5 倍。當然我們也可以給line-height設置像素、百分比或em值。但要注意的是，在元素繼承的時候，繼承的是計算後的值。這就會導致如果我們在body上設置1.5em，其他元素繼承的並不是1.5em，而是24px。這顯然不是我們想要的。

好在line-height設置為沒有單位的值時並不會出現這一現象，子元素繼承的永遠都會是這個數值。

2. 垂直對齊

垂直對齊vertical-align的默認值是基線對齊baseline，即子元素的基線與父元素的基線對齊。它還有很多很有意思的值如：sup、top、bottom、text-top、text-bottom、middle，還可以設置像素值、em以及百分比。

如下圖所示，紅框中的文字分別應用了不同的 vertical-align 值，字面文字即為屬性值。

vertical-align不同值對應效果

其中text-top與text-bottom會讓當前元素的內容區和父元素的內容區頂部或底部對齊，但只有在行內盒子的 font-size 或 line-height 與父元素不同時才有影響。

從圖中，我們還能看出，當使用 vetical-align 調整元素位置時，會擴展行盒子的高度。這也是我們前面為什麼說：「當行盒子內有多個行高不等的行內盒子時，行盒子最後的高度至少等於最高的」。

最後，需要提一下，與行內文本相比，行內塊和圖片的垂直對齊行為稍有不同，因為圖片不一定有自己的唯一基線。第 6 章的時候會介紹。

4.1.5 文本粗細（字重）

下面，我們可以使用font-weight給不同的標題指定不同的文本粗細，也稱字重。font-weight支持關鍵字normal、bold、bolder、lighter，也可以指定數字值，都是 100 的倍數，100~900.

默認值為normal，對應數字 400，bold對應 700。關鍵字bolder和lighter是在繼承值的基礎上把文本變得更粗或更細。

如下，我們給標題設置字重 500，h1 和 h2 分別是 800 和 600：

h1, h2, h3, h4, h5, h6 {    font-weight: 500;  }  h1 {    font-weight: 800;  }  h2 {    font-weight: 600;  }

如果指定的粗細不存在，瀏覽器盡量模擬，但是效果不會很好。

4.1.6 字體樣式

font-style除了normal外還有兩種樣式，分別是italic和oblique。italic會選擇字體的斜體變體來顯示，如果不存在，瀏覽器會通過傾斜字體來模擬，但是效果不太理想。oblique也是傾斜文本的一種變體，但是沒有幾款字體支持，所以很少使用。

4.1.7 文字變換

CSS 中有兩種文字變換，分別是text-transform和font-variant。font-variant更準確的說是字體的一種變體，需要字體支持。

text-transform可以控制英文字母大小寫。uppercase可以將所有字母顯示為大寫，lowercase可以將所有字母變成小寫，capitalize可以將每個單詞的首字母大寫，none顯示源碼中的默認大小寫。

如下，我們可以將h1元素中的字母全部大寫。

h1 {    text-transform: uppercase;  }

font-variant是字體的特殊變體，需要字體支持。如small-caps可以把英文文本轉換成所謂的「小型大寫字母」。我們可以將文檔中 NASA 縮寫進行這一變化。不過文中 NASA 已經是大寫了，所以我們還加了text-transform: lowercase;將其轉換為小寫字母；此外由於 small-caps 會導致某些瀏覽器把內容盒子向下移動一點，所以縮小了一下行高。

abbr {    font-variant: small-caps;    text-transform: lowercase;    line-height: 1.25;  }

效果圖如下：

small-caps效果

CSS2.1 中，只規定了small-caps這一個有效值。CSS Font Modules Level 3[3]擴展了很多，後面高級排版技術我們再介紹。

4.1.8 字間距和詞間距

word-spacing可以調整單詞與單詞之間的距離。letter-spacing可以調整字母與字母之間的距離。

通常情況下，我們無需做字間距和詞間距的調整。如果設計師有特殊需求時，我們可以進行相應的調整。

4.1.9 行長

我們都知道，每一行文字的多少（也就是行長），對於閱讀體驗有着重要的影響。過長或過短的文本行會打斷人的眼球移動，導致讀者無法連續閱讀，甚至讀不下去。

書中建議主體內容的文本行長通常是 45-75 個字符，平均 66 個字符。對於小屏幕也要有至少 40 個字符。

所以，我們可以直接給article元素設置如下屬性。這裡推薦使用max-width，好處是當時候屏幕比這個更窄時可以自動調整。

article {    max-width: 33em;  }

4.1.10 縮進與對齊

接下來，我們可以調整一下縮進與對齊。對於段落，我們可以設置一定的縮進，方便用戶定位新段落的起始，這個在中文排版中比較常見。

p {    text-indent: 1.25em;  }

另外，我們會發現段落的右邊參差不齊，這種樣式叫做「毛邊」。這是因為文本默認是左對齊的。

text-align有以下幾個值：left|right|center|justify。left|right|center三個值都會存在毛邊。其中比較適合給短標題應用center(我們給h1應用一個)。justify可以再單詞間平均分佈間距，實現左右兩端對齊，消除毛邊。但是當某些行空白太多，會出現空白「串流」的現象，並且行長越短越明顯。如下圖所示。

justify空白串流

這主要是因為瀏覽器處理文本兩端對齊時使用的算法較為粗糙，雖然我們可以通過text-justify來修改算法，但瀏覽器的支持度較差，效果也不太好。

此外，text-align新增了start|end兩個新的值，這兩個值與文本書寫方向對應。如果dir="ltr"文字書寫方向是從左到右，則start為左，end為右；反之同理。

4.1.11 連字符

如果又想解決毛邊問題，又不想出現串流問題。我們可以在 HTML 中手動插入連字符的實體符號&shy;。只有當瀏覽器需要斷詞換行是才會顯示這個連字符。

但是這個方式想想就不可能是吧。誰會沒事手動插入連字符，行長變了咋辦？

好在我們可以使用hyphens屬性來讓瀏覽器幫我們插入連字符。該屬性有兩個值auto自動和manual手動。

但是這個屬性較新，很多瀏覽器都不支持，部分需要加前綴，大家可以自行在Can I Use[4]上查詢一下。支持度不好沒事，別忘了我們前面提到的漸進增強，這是一個可以提高體驗的優化方案，所以我們可以照用不誤。

不過想要使用自動連字符功能，一定要在 HTML 中設置語言代碼<html lang="en">。

連字符的效果如下圖所示：

連字符效果

4.2 文本特效

「標題黨」總是能夠更抓人眼球，賺取更多的點擊。見慣了標題黨小伎倆的我們可能早就不吃這一套了。不過，今天我們也要給大家說一說標題黨。但是此標題黨非彼標題黨，我們是要讓你的標題看起來更炫更酷。

我們可以藉助text-shadow文本陰影來實現很好看的標題特效。給大篇幅的正文文本應用陰影不僅不會更炫，反而會降低可讀性。陰影更適合標題或短文本，我們可以用其模擬凸版印刷或噴塗效果。

text-shadow的語法格式為<offset-x> <offset-y> <blur-radius> <color>，如1px 1px 5px 0，其中顏色值放在最前或者最後都行。offset-x/offset-y是 x/y 軸的偏移量(可正可負)；blur-radius為模糊半徑，0 表示完全不模糊；color為顏色，如果不傳顏色，默認為黑色。

此外，我們還可以用逗號分隔來應用多組陰影，多組陰影會按照先後順序堆疊，先定義的在上，後定義的在下。

如下，我們可以給h1標題應用如下樣式：

h1 {    text-shadow: -2px 2px 0 goldenrod,                    0px -2px 0 goldenrod,                    0px 3px 0 goldenrod,                    3px 0px 0 goldenrod,                    -3px 0px 0 goldenrod,                    2px 2px 0 goldenrod,                    2px -2px 0 goldenrod,                    -2px -2px 0 goldenrod,                    -3px 3px 0 #233956,                    -4px 3px 0 #3568A8,                    -4px 5px 0 #233956,                    -5px 4px 0 #3568A8,                    /* ...省略部分 */                    -13px 12px 0 #3568A8,                    -13px 14px 0 #233956,                    -14px 13px 0 #3568A8,                    -14px 15px 0 #233956,                    -15px 14px 0 #3568A8,                    -15px 16px 0 #233956,                    -16px 15px 0 #3568A8;  }

效果如下：

h1標題文字特效

文本陰影是一門很深的學問，需要對齊不斷嘗試，充分發揮才能創造出更多有意思的效果。Typekit Practice 的Using shades for eye-catching emphasis[5]一文有更多的類似技術，大家感興趣可以看一下。

4.3 多欄布局

第一部分我們把整篇文章的行長設置為了33em，但是如果在較大的屏幕下，僅僅只有33em的行長可能會浪費很多空間。有時候為了有效利用寬屏，我們可以使用多欄布局。

多欄布局主要包括以下幾個屬性：

  • column-gap: 欄間距，值為長度值
  • column-count: 欄數，值為數字
  • column-width: 欄寬，值為長度值
  • column-span: 是否跨欄，all開啟跨欄，none關閉跨欄。
  • column: column-count和column-width的簡寫形式。

如果只設置column-count，瀏覽器會嚴格生成指定數量的欄，不管寬度如何。如果同時設置了column-count和column-width，則前者會作為最大欄數，後者會作為最小欄寬，也就是說優先保證欄寬，如果不夠欄數減少也沒關係。

如下，我們可以這樣進行多欄布局。

/* 一級標題和來源跨行 */  h1,  .source {    column-span: all;  }  /* article指定最大寬度，欄數自動生成 */  article {    max-width: 70em;    columns: 20em;    column-gap: 1.5em;  }

效果如下圖所示：

多欄布局

最後對於不支持多欄布局的瀏覽器，我們要實現優雅降級，可以給段落元素應用max-width屬性，限制行長的最大寬度。這樣，舊版瀏覽器只會顯示一欄，但仍然可讀。

article > p {    max-width: 33em;  }

不知道你有沒有注意到，上面的效果圖中，三欄中的文本基線已經沒有對齊的（對着上圖你看，你細細地看）。這主要是因為標題高度導致的問題。這一問題會一定程度地影響閱讀。我們可以通過修改標題的高度，讓其等於段落文本的整數倍，從而使得各欄文本的基線均對齊，這種方法叫做垂直律動。

如下，對標題做如下調整。讓兩個標題的上下邊距加行高等於正文行高的整數倍。如此，所有欄的文本基線就都能對齊了。

h2 {    font-size: 1.75em; /* 28px */    line-height: 1.25; /* 28*1.25 = 35px; */    margin-top: 1.036em; /* 29px */    margin-bottom: 0.2859em; /* 8px */  }  h3 {    font-size: 1.314em; /* 21px */    line-height: 1.29; /* 21*1.29 = 27px; */    margin-top: 0.619em; /* 13px */    margin-bottom: 0.38em; /* 8px */  }

最後，h1 的高度是 72px，h2 的高度是 48px，剛好是正文行高的整數倍，如下圖所示，所有欄的正文都對齊了。

多欄文本應用垂直律動

4.4 更豐富的字體：Web 字體

前面介紹的內容中，多數都是使用系統自帶的字體。其實我們也可以使用自定義的字體。

相信大家對於 Web 字體一定不會陌生，大家一定都用過一些 Icon Font 相關的字體，如阿里的https://iconfont.cn[6]，這類字體也是 Web 自定義字體的一種。

我們可以通過@font-face規則來聲明自定義的字體。它可以指定瀏覽器下載字體的地址以及如何在樣式表中引用字體。

@font-face {    font-family: Vollkorn;    src: url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff');    font-weight: 800;  }

在具體介紹@font-face規則之前，我們先了解一下字體的格式。

4.4.1 字體文件格式

目前現代瀏覽器基本都支持 Web 字體，但對於文件格式的支持卻並不統一。字體格式的問題很複雜，涉及微軟、蘋果以及 Adobe 等公司的發展史，此處我們不做詳述。為了保證各個瀏覽器可用，我們通常需要補足各種字體文件的格式，如WOFF、WOFF2、SVG、EOT、TTF。

如下：

@font-face {    font-family: Vollkorn;    src: url('fonts/vollkorn/Vollkorn-Bold.eot#?ie') format('embeded-opentype'),           url('fonts/vollkorn/Vollkorn-Bold.woff2') format('woff2'),           url('fonts/vollkorn/Vollkorn-Bold.woff') format('woff'),           url('fonts/vollkorn/Vollkorn-Bold.ttf') format('truetype'),           url('fonts/vollkorn/Vollkorn-Bold.svg') format('svg');    font-weight: 800;  }

如果你只有其中一種字體格式，可以通過Font Squirrel[7]進行轉換。

4.4.2 字體描述符

@font-face規則中接受以下幾個聲明，又稱字體描述符：

  • font-family: 必需，使用該字體時字體族的名稱。
  • src: 必需，URL 或 URL 列表（逗號隔開），用於下載字體。
  • font-weight: 可選，字體粗細，默認為normal。
  • font-style: 可選，字體樣式，默認為normal。

瀏覽器在匹配字體時優先匹配font-family，如果存在font-family對應的字體則應用。如果對應字體聲明了多次，如font-weight不同，分別為bold和normal，那麼就會在字重不同的時候應用不同的字體。如果只聲明了一次，則不管什麼字重都應用該字體。font-style同理。

4.4.3 性能

Web 字體讓網頁有了更多的可能性，但也帶來了一些問題。

首先，瀏覽器需要下載額外的字體文件，這會延長用戶等待的時間。所以我們一方面要注意不要加載過多字體，另一方面要對字體文件做緩存，從而避免不必要的網絡開銷。

此外，對於非文檔類的網站，如果字數有限，可以通過字體截取的功能來減小字體文件的大小。這一點對於中文字體來說尤為重要，因為中文字體動輒就是幾十兆，通過截取的方式可以大大減小字體文件的大小。大家可以通過字蛛[8]來進行字體截取，也有一些根據網頁內容動態截取的解決方案，大家有需要的話可以找一找。

其次，除了額外的加載，瀏覽器在下載字體的時候，有兩種方式處理相應的內容。第一種方式是在下載完成前，暫緩顯示文本，這就會導致在下載完成之前，用戶什麼都看不到，這種現象叫做FOIT(flash of invisible text)。Safari、Chrome 和 IE 默認採用這種方式，如果網速很慢的話，用戶體驗會很差。

第二種方式，是在字體下載完成前，瀏覽器先用一種後備字體作為替代顯示。可以避免網速慢導致的頁面空白問題，但是也會帶來新的問題——字體切換時的閃爍，這種現象叫做FOUT(flash of unstyled text)。這種閃爍會影響用戶閱讀，如果內容差距較大還會導致失去焦點，所以我們盡量選擇較為相似的字體作為後備字體。

4.4.4 JavaScript 加載字體

CSS Font Loading[9]規範定義了一個用於加載字體的實驗性 JavaScript API，但是尚未得到瀏覽器的廣泛支持。不過 Typekit 維護了一個開源庫可以讓我們有類似的能力來操作字體，叫Web Font Loader[10]。

這裡我們簡單介紹一下這個庫的原理。Web Font Loader 主要暴露了以下三個事件：

  • loading: 開始加載字體
  • active: 字體加載完成
  • inactive: 字體加載失敗

我們可以做的事情就是如果字體成功加載了，可以給根元素添加一個特殊的類名，這樣就可以給自定義字體和後備字體定義不同的樣式了。通過細微的調節，可以讓兩種字體切換時的閃爍感降到最低，如將行高調整一致，對於 x 高度不一致的字體調整字體大小等。

4.5 高級的排版特性：OpenType

前面我們知道了如何使用更豐富的字體。那麼我們可能會應用一些具有豐富特性的字體。在有些 OpenType 字體格式中支持在字體文件中包含字體的額外設定和特性，包括連字（ligature，由字符組合而成的特殊字形，如「fi」或「ffl」 ），字距（kerning，調整特定字母組合的間距），分數形式，數字風格等。使用這些特性可以使我們的網站更有用、更易讀、更優美。

那麼一款 OpenType 的字體到底有哪些特性呢？我們可能是一臉懵逼的，我也不是字體的設計者，我怎麼知道某款字體有沒有某種特性呢？好在已經有前人為我們解決了這一麻煩。我們可以通過https://wakamaifondue.com[11]這一網站來查看字體功能、特性的相關內容。

如下，我們將書中的示例字體Vollkorn Semibold傳入上述網站，可以看到解析結果中如圖中藍框所示的特性。

Vollkorn Semibold字體特性

CSS 里定義了很多與這些特性相關的屬性如連字的font-variant-ligatures、字距font-kerning、數字風格font-variant-numeric等。但這些屬性支持度並不好，不過我們可以使用底層屬性font-feature-settings來控制。建議大家兩種同事使用。

如下，我們可以像這樣設置字體特性（示例中是開啟了常用連字和任意連字）：

h1, h2, h3 {    font-variant-ligatures: discretionary-ligatures;    -webkit-font-feature-settings: "liga", "dlig";    -moz-font-feature-settings: "liga", "dlig";    -moz-font-feature-settings: "liga=1, dlig=1";    font-feature-settings: "liga", "dlig";  }

連字的效果大概像下面這個樣子，大家應該都能理解。

連字的效果

稍微解釋一下font-feature-setting的語法，其語法格式為font-feature-setting: <feature-code>;。主要有以下幾點細節：

  • 可以通過加引號的 4 個字符的特性代碼開啟相應的字體特性，代碼後可接關鍵字on/off，分別表示開啟或關閉，也可以接一個數字。如果不指定則默認是on。
  • 如果只為數字，0 一般表示關閉特性。如果特性只有開關兩個狀態，則 1 為開啟；如果有多個狀態，則根據字體來選擇對應的數字。
  • 多個特性之間用逗號隔開。
  • 不同瀏覽器的瀏覽器可能需要加前綴（這個不用手動加，建議使用 CSS 預處理器）。其中 Mozilla 瀏覽器的舊語法有一些不同，多個特性是寫在一個引號內的，如上代碼中所示。

下面我們看下數字的效果。文本段落中的「老式」數字風格和小寫字母搭配更合適；「表格數字」在表格里的費用清單里排列得更整齊；而「線性」數字單獨使用或與大寫單詞搭配使用顯得更為統一。分別如下面兩圖所示。

Vollkorn字體中的線性數字(上)與老式數字(下)

Alegreya Sans的表列線性數字，右側的價格寬度不同，但是垂直對齊

OpenType 相關的特性有很多，而且受到字體的影響，本文就不再做詳細的介紹了，大家對於這一概念有一個整體的了解就好。後續歪馬有空會整理一篇完整的 OpenType 特性相關的文章。

另外，因為中文的特殊性，中文字體往往也不具備這些特性，所以不感興趣的同學可以先行略過。當然數字相關的我們還是會用到的。

文內鏈接

[1]CodeSandbox: https://codesandbox.io/embed/jingtongcss-l8tye?fontsize=14&hidenavigation=1&theme=dark

[2]https://www.cssfontstack.com: https://www.cssfontstack.com/

[3]CSS Font Modules Level 3: https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/

[4]Can I Use: https://caniuse.com/

[5]Using shades for eye-catching emphasis: https://practice.typekit.com/lesson/using-shades/

[6]https://iconfont.cn: https://www.iconfont.cn/

[7]Font Squirrel: https://www.fontsquirrel.com/

[8]字蛛: http://font-spider.org/

[9]CSS Font Loading: https://www.w3.org/TR/css-font-loading-3/

[10]Web Font Loader: https://github.com/typekit/webfontloader

[11]https://wakamaifondue.com: https://wakamaifondue.com/

VirMach 便宜 VPS

QNews

QNews