簡介
字型排版絕不僅僅是使用字型那麼簡單，它包括了關於文字“看上去會是怎麼樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細枝末節的小事。一個好的文字排版會為你所寫的內容定下情感基調，並且可以幫助讀者更好的理解其內容和語境。
本文是站在一個網頁設計師的角度，所寫的關於最佳字型排版實踐的手冊。為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會非常精簡清晰，如果你想進一步的瞭解更多細節，可以點選檢視在每一章中的“擴充套件閱讀”去深入瞭解。
最後，這本手冊將會在GitHub上開源,並且會持續更新一些最佳實踐的範例，希望你們喜歡！
字型排版設計
視覺層次
視覺層次是一種理念，它意在傳達頁面中的元素應該依照其重要性進行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關的內容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用於文字排版中，它構成了文字排版設計的理論基石。
請看下圖的“愛麗絲夢遊仙境”的字型排版設計，它展現了一個清晰的視覺層次:
視覺層次可以被分成以下4個部分:
- 字型大小 & 字型重量: 設定字型大小和字型重量是兩種構建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什麼地方是最重要的，引導讀者的目光落到這裡的內容上來。只是簡單地為文字加上這兩種樣式，文章的重點便一目瞭然了。
- 定位: 元素定位是另外的一種構建視覺層次的方式，就像上圖中，文章的標題和作者資訊通過置頂和居中表明瞭它們的重要性。
- 字型: 通過使用有對比度的字型可以提高不同元素之間的辨識度，從而構建視覺層次
- 顏色: 為重要的文字設定不同的顏色也是一種非常簡單的構建視覺層次的方式。然而使用這種方式的時候一定要小心，因為顏色的濫用可能會造成重點部分辨識度的降低。
擴充套件閱讀:
- Visual Hierarchy: How Well Does Your Design Communicate?
- Creating Exciting And Unusual Visual Hierarchies
字型排版中的格式塔原則
格式塔原則, 或格式塔法則, 是一種構建感性認知的規律。當我們觀察這個世界的時候，我們通常會意識到，一個複雜的場景是由多個在某些背景之上的物體構成的，而這些物體則是由更小的一些物體構成的，依此迴圈下去。Scholarpedia
在字型排版中我們需要理解的兩個很重要的格式塔原則就是“距離原則”和“相似原則”。.
###距離原則
為了更好地掌握元素定位的方法，瞭解距離原則是很重要的。距離原則表明，人們會將靠得近的物體視為有關聯的物體，反之，隔得比較遠的物體將會被看成屬於不同類別。
在字型排版設計中，“距離”指的是通過設定行高、內間距和外間距所製造出來的留白空間。在兩段不同的段落之間應該留有明顯的並且易於區分的留白間隔，請看下面的例子:
注意啦，你覺得應該把內容相關的部分都擠到一個很小的空間中去嗎？當然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關係的段落之間額外的加上一些易於區分的留白就可以了
相似原則
格式塔的相似原則告訴大家，看起來很像的東西會被認為是一類的東西。舉個例子，如果所有可點選的文字被設定為天藍色，那麼讀者就會認為文章中所有天藍色的文字內容都是可以點選的。
在字型排版中，相似原則就意味著，擁有同樣功能的元素應該在樣式上保持一致。如果兩組元素的功能相似的話，那麼它們也應該看起來很像才對。例如，兩篇同為部落格帖子的文章應該看起來很像。而相反的，兩個功能不相同的元素也應該看起來不像。
擴充套件閱讀:
- Gestalt Theory in Typography & Design Principles
- Proximity, Uniform Connectedness & Good Continuation
字型
選擇字型
選擇字型是一個具有創造性和情感的過程。不同的字型可以傳達不同的情感，你可以盡情挑選一個合適的字型讓你的文字感情變得豐沛起來。
- 首先為你的文字的正文挑選一個合適的字型，當你需要搭配不同字型的時候，記得要保持正文字型的不變，然後試著依據這個字型選擇和它相搭配的其他字型。
- 使用一些例如TypeTester 和 TypeCast 這一類的工具會讓你進行字型選擇的時候輕鬆一些。
- 從他人處獲得靈感! Fonts In Use提供了大量的優秀的字型搭配範例。
- 有些字型本來就是為用作大標題而設計的，而有些字型天生就只適合那些小螢幕，你要依照每個字型的“天性”去使用它們。你可以在WebType 上面找到對於不同字型而言合適的尺寸。此外 TypeKit也標明瞭其上的字型是適合標題或者是正文。
擴充套件閱讀:
- Selecting Typefaces For Body Text
- Five Principles For Choosing And Using Typefaces
- Best Practices For Combining Typefaces
使用web字型
我們使用以下的格式來宣告引入的web字型檔案:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<span class="lit">@font</span><span class="pun">-</span><span class="pln">face </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span> <span class="str">'Helvetica Neue'</span><span class="pun">;</span><span class="pln"> src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Light.eot'</span><span class="pun">);</span><span class="pln"> src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Light.eot?#iefix'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'embedded-opentype'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Light.woff2'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff2'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Light.woff'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Light.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">);</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span> <span class="lit">300</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span> <span class="pun">}</span> <span class="lit">@font</span><span class="pun">-</span><span class="pln">face </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span> <span class="str">'Helvetica Neue'</span><span class="pun">;</span><span class="pln"> src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Bold.eot'</span><span class="pun">);</span><span class="pln"> src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Bold.eot?#iefix'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'embedded-opentype'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Bold.woff2'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff2'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Bold.woff'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue-Bold.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">);</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> bold</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span> <span class="pun">}</span> <span class="lit">@font</span><span class="pun">-</span><span class="pln">face </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span> <span class="str">'Helvetica Neue'</span><span class="pun">;</span><span class="pln"> src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue.eot'</span><span class="pun">);</span><span class="pln"> src</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue.eot?#iefix'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'embedded-opentype'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue.woff2'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff2'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue.woff'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'woff'</span><span class="pun">),</span><span class="pln"> url</span><span class="pun">(</span><span class="str">'/assets/fonts/HelveticaNeue.ttf'</span><span class="pun">)</span><span class="pln"> format</span><span class="pun">(</span><span class="str">'truetype'</span><span class="pun">);</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">weight</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span> <span class="pun">}</span> |
- 為了達到最大程度上的相容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會支援大部分的現代瀏覽器。
- 你需要為每個列出來的格式提供一個相應的字型檔案。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator，這樣你就可以在只有一個字型檔案的情況下，將其轉換成不同的檔案格式。
- 儘可能的壓縮你的字型檔案。 點選這裡 檢視更多資訊。
- 將多個同源字型檔案（細體、常規、半粗體、粗體等等）合併成一個
font-family, 儘量不要為每個字型都起一個新的font-family的名字。
或者，你也可以通過線上字型資源服務，如Google Fonts 或者 Typekit引入你想要的字型。
擴充套件閱讀:
載入字型
在你引入的字型被渲染出來之前，他們需要先進行載入。下面是三種在載入的時候可能會發生的事情：
- 引入的字型沒有被識別出來，字型應用了備用字型。
- 引入的字型雖然被識別出來但是沒有載入，他需要在下載完成之後才會被應用。
- 引入的字型被成功識別並迅速應用。
場景1只發生在你嘗試使用一個不存在的字型，或者宣告時候的src指向了一個壞鏈， 這種情況可以並且應該徹底避免。接著我們跳到場景3,這種情況通常在字型被正確的快取的時候發生，也是我們喜聞樂見的。場景2中包含著字型載入的過程，字型載入通常是難以避免的（至少是在第一次請求的時候），下面是幾種處理方式：
1. 文件樣式閃爍方案 (FOUT). FOUT是指網頁會在切換到合適的網頁字型之前，使用預設或者備選字型顯示文字。這種情況的出現是因為只有當HTML和CSS都被下載完成之後，字型請求才會發出。這就意味著，在HTML被顯示出來而字型檔案沒有被完全下載下來中間存在著一段“空檔”時間。 FOUT 算是對大部分的網頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，FOUT 很難被使用者察覺出來。
2. 不可見文字閃爍方案(FOIT).很多年前，一些現代瀏覽器開始使用一種新的技術來處理字型載入的問題 — FOIT. FOIT是指當瀏覽器檢測到字型正在載入的時候，隱藏應用這段字型的文字，直到字型完全下載完才將其顯示出來。 然而我們應該避免這種做法雖然這樣做從理論上看起來還不錯，但是這會帶給那些網路速度比較差的使用者十分糟糕的體驗。有可能會在最初的FOIT後出現FOUT, 最壞的情況可能會是這段文字將永遠看不到了。
3. 白屏方案，即在字型載入完成之前，整個網頁都處於不可見的狀態，或者也可以採用顯示一個進度條.我們只推薦當FOUT 嚴重影響使用者體驗的時候使用這種方法。 我們通常在一個網頁需要大面積顯示一個特定的字型的時候使用該方法，否則，FOUT 總會我們的第一選擇，因為“內容至上”。白屏方案與 FOIT很相似, 但對於你來說，你擁有控制在什麼時候給使用者展示你的內容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中, 不可見的文字有時候會給讀者帶來困惑，而徹底的白屏（或者一個進度條）會讓人很自然的覺得是一個正在載入的訊號。
不管你是打算使用 FOUT 方案或者白屏方案, 我們都推薦您使用Web Font Loader這個JavaScript庫. Web Font Loader 可以讓你對 @font-face加以控制, 而且你也為字型載入的體驗新增控制事件。
注意: 有一個W3C 字型載入 API也會實現同樣的功能，但是它現在的 支援不是很好_
FOUT 方案
下面是一個使用 Web Font Loader 實現了 FOUT的例子:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<span class="tag"><script</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">></span> <span class="typ">WebFontConfig</span> <span class="pun">=</span> <span class="pun">{</span><span class="pln"> google</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> families</span><span class="pun">:</span> <span class="pun">[</span> <span class="str">'Lora:400,700,400italic,700italic:latin'</span> <span class="pun">]</span> <span class="pun">}</span> <span class="pun">};</span> <span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> wf </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'script'</span><span class="pun">);</span><span class="pln"> wf</span><span class="pun">.</span><span class="pln">src </span><span class="pun">=</span> <span class="pun">(</span><span class="str">'https:'</span> <span class="pun">==</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">location</span><span class="pun">.</span><span class="pln">protocol </span><span class="pun">?</span> <span class="str">'https'</span> <span class="pun">:</span> <span class="str">'http'</span><span class="pun">)</span> <span class="pun">+</span> <span class="str">'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'</span><span class="pun">;</span><span class="pln"> wf</span><span class="pun">.</span><span class="pln">type </span><span class="pun">=</span> <span class="str">'text/javascript'</span><span class="pun">;</span><span class="pln"> wf</span><span class="pun">.</span><span class="pln">async </span><span class="pun">=</span> <span class="str">'true'</span><span class="pun">;</span> <span class="kwd">var</span><span class="pln"> s </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">'script'</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">];</span><span class="pln"> s</span><span class="pun">.</span><span class="pln">parentNode</span><span class="pun">.</span><span class="pln">insertBefore</span><span class="pun">(</span><span class="pln">wf</span><span class="pun">,</span><span class="pln"> s</span><span class="pun">);</span> <span class="pun">})();</span> <span class="tag"></script></span> <span class="tag"><noscript></span> <span class="tag"><link</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">'http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic'</span> <span class="atn">rel</span><span class="pun">=</span><span class="atv">'stylesheet'</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">'text/css'</span><span class="tag">></span> <span class="tag"></noscript></span> <span class="tag"><style></span><span class="pln"> p </span><span class="pun">{</span> <span class="com">/* use fallback fonts */</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">wf</span><span class="pun">-</span><span class="pln">active p </span><span class="pun">{</span> <span class="com">/* styles for custom fonts */</span> <span class="pun">}</span> <span class="tag"></style></span> |
- 非同步地使用 Web Font Loader 很重要，只有這樣做才不會延誤頁面其他部位的渲染。
- 寫樣式的時候，讓你的備用字型儘可能近的靠近你的實際字型，這樣才能最大程度的減少 FOUT造成的影響.點選 這裡你將會看到一系列的備選字型. 使用 這個工具你將很容易的看到備選字型和你引入的字型的對比效果.
白屏方案
下面是一個使用 Web Font Loader 實現了白屏方案的例子:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span class="tag"><script</span> <span class="atn">src</span><span class="pun">=</span><span class="atv">"https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"</span><span class="tag">></script></span> <span class="tag"><script></span> <span class="typ">WebFont</span><span class="pun">.</span><span class="pln">load</span><span class="pun">({</span><span class="pln"> google</span><span class="pun">:</span> <span class="pun">{</span><span class="pln"> families</span><span class="pun">:</span> <span class="pun">[</span><span class="str">'Raleway'</span><span class="pun">,</span> <span class="str">'Oswald'</span><span class="pun">]</span> <span class="pun">}</span> <span class="pun">});</span> <span class="tag"></script></span> <span class="tag"><noscript></span> <span class="tag"><link</span> <span class="atn">href</span><span class="pun">=</span><span class="atv">'https://fonts.googleapis.com/css?family=Raleway|Oswald'</span> <span class="atn">rel</span><span class="pun">=</span><span class="atv">'stylesheet'</span> <span class="atn">type</span><span class="pun">=</span><span class="atv">'text/css'</span><span class="tag">></span> <span class="tag"></noscript></span> <span class="tag"><style></span> <span class="pun">.</span><span class="pln">wf</span><span class="pun">-</span><span class="pln">loading </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">wf</span><span class="pun">-</span><span class="pln">active p </span><span class="pun">{</span> <span class="com">/* styles for custom fonts */</span> <span class="pun">}</span><span class="pln"> p </span><span class="pun">{</span> <span class="com">/* use fallback fonts */</span> <span class="pun">}</span> <span class="tag"></style></span> |
- 在這個例子裡面，備選字型不需要和你引入的字型看起來很像，因為我們不會用到 FOUT. 依照你自己的喜好去選擇備選字型吧。
- 如果你想要用一個進度條取代白屏，你可以使用Pace。這種方法在使用者體驗上效果會更好一些，特別是當字型檔案很大的時候。
擴充套件閱讀:
OpenType 的特性
OpenType 的特性可以被視為文字進行字型排版時的可選項，它們被用來加強文字的表現和易讀性。
|
1 2 3 4 5 6 7 8 |
<span class="pln">p </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">kerning</span><span class="pun">:</span><span class="pln"> normal</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">variant</span><span class="pun">-</span><span class="pln">ligatures</span><span class="pun">:</span><span class="pln"> common</span><span class="pun">-</span><span class="pln">ligatures contextual</span><span class="pun">;</span> <span class="pun">-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">feature</span><span class="pun">-</span><span class="pln">settings</span><span class="pun">:</span> <span class="str">"kern"</span><span class="pun">,</span> <span class="str">"liga"</span><span class="pun">,</span> <span class="str">"clig"</span><span class="pun">,</span> <span class="str">"calt"</span><span class="pun">;</span> <span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">feature</span><span class="pun">-</span><span class="pln">settings</span><span class="pun">:</span> <span class="str">"kern"</span><span class="pun">,</span> <span class="str">"liga"</span><span class="pun">,</span> <span class="str">"clig"</span><span class="pun">,</span> <span class="str">"alt"</span><span class="pun">;</span> <span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">feature</span><span class="pun">-</span><span class="pln">settings</span><span class="pun">:</span> <span class="str">"kern"</span><span class="pun">,</span> <span class="str">"liga"</span><span class="pun">,</span> <span class="str">"clig"</span><span class="pun">,</span> <span class="str">"calt"</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">feature</span><span class="pun">-</span><span class="pln">settings</span><span class="pun">:</span> <span class="str">"kern"</span><span class="pun">,</span> <span class="str">"liga"</span><span class="pun">,</span> <span class="str">"clig"</span><span class="pun">,</span> <span class="str">"calt"</span><span class="pun">;</span> <span class="pun">}</span> |
- OpenType 特性被放置於字型之中，這就意味著對於不同的字型，會有不同的特性，在使用這些特性之前，我們需要看一看我們的字型是否支援這些特性。
- 使用
font-feature-settings來啟用 OpenType 特性. 由於目前對於這個屬性的支援不好，我們需要在屬性之前加上字首。 - Kerning
kern, ligaturesliga, contextual ligaturesclig, 和 contextual alternativescalt這四種適用於所有字型中 ######( 譯者注：font-feature-settings這種屬性僅支援拉丁文語系的字型使用，並不支援中文哦！ )
擴充套件閱讀:
Web Style Guide
相對大小
儘可能的使用相對大小。
|
1 2 3 4 5 6 7 8 |
<span class="pln">html </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">100</span><span class="pun">%</span> <span class="pun">}</span><span class="pln"> p </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">1em</span> <span class="pun">}</span> <span class="lit">@media</span> <span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span> <span class="lit">64em</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> html </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">112.5</span><span class="pun">%;</span> <span class="pun">}</span> <span class="pun">}</span> |
font-size: 100%與瀏覽器的字型大小設定保持一致而不是去覆寫它，根據大多數的瀏覽器的預設設定，這裡也可以用1em代替表示16px.- 通過改變
html的font-size會影響到所有單位為em和rem的元素.如果是對於響應式設計的網頁，這樣做還是比較實用的。 - 使用者的選擇也很重要，所有不要偏離
font-size: 100%和1em太遠. - 對於
font-size建議使用rem和em. - 對於一些元素定位如
margin,padding等等，建議使用rem,em, 或者%。 - 對於媒體查詢中尺寸建議使用
em. - 對於一些大的標題字或者配有圖片的字，可以使用FitText來實現標題的縮放。儘量避免使用
vw和vh因為現在的支援還不是很好,難於精確的配置，並且對於一些瀏覽器的字型和縮放設定並不適配 。
####擴充套件閱讀:
- Type Study: Sizing The Legible Letter
- 5 Useful CSS Tricks for Responsive Design
- REM vs EM – The Great Debate
- PX, EM or REM Media Queries?
容器
容器，或者稱為包裝，指的是用來包裹一個或者多個元素的HTML元素。它將元素分組，從而更好進行語義化、修飾以及佈局。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="pln">html </span><span class="pun">{</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">sizing</span><span class="pun">:</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">*,</span> <span class="pun">*:</span><span class="pln">before</span><span class="pun">,</span> <span class="pun">*:</span><span class="pln">after </span><span class="pun">{</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">sizing</span><span class="pun">:</span><span class="pln"> inherit</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span> <span class="lit">67rem</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span> <span class="lit">1.5rem</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">right</span><span class="pun">:</span> <span class="lit">1.5rem</span><span class="pun">;</span> <span class="pun">}</span> |
- 強烈建議使用
box-sizing: border-box. 點選這裡 檢視更多資訊。 - 左/右內間距與最大寬度聯合使用可以很容易地建立一個移動端友好的容器。
- 要為容器選擇一個合適的寬度，既不能太大（因為太大的話讀者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經常移動才可以看清）。永遠記住，在進行網頁字型排版的時候，沒有一個適合所有字型、尺寸、行距和解析度的鐵律，你需要自己來做決定。
擴充套件閱讀:
字型大小
使用 縮放模組 可以幫助你決定在你的元素上面應用怎樣的font-size .縮放模組指的是依照其內容安排的一系列比較合適的字型大小的數值。
- 我們可以在編寫CSS的一開始使用縮放模組，將它作為一個參考。
- 值的注意的是，儘管不同的字型有著不同的大寫字母高度和x字母高度，可是大多數的模組化縮放工具都沒有將這些考慮在內。
- 在你的樣式表中，建議將你所使用到的縮放模組工具的配置資訊寫在註釋之中。
響應式的縮放模組
只使用單獨的一個縮放模組方案並不一定適合所有解析度的裝置，為了解決這個問題，你可以依據使用者的裝置的解析度的不同提供不同的縮放方案
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<span class="com">//Sass responsive modular scale</span> <span class="com">/* * Modular scale * http://www.modularscale.com/?1.25&em&1.33&web&text */</span><span class="pln"> $type</span><span class="pun">-</span><span class="pln">scale</span><span class="pun">-</span><span class="pln">large</span><span class="pun">:</span> <span class="pun">(</span><span class="pln"> h1</span><span class="pun">:</span> <span class="lit">3.911rem</span><span class="pun">,</span><span class="pln"> h2</span><span class="pun">:</span> <span class="lit">2.941rem</span><span class="pun">,</span><span class="pln"> h3</span><span class="pun">:</span> <span class="lit">2.211rem</span><span class="pun">,</span><span class="pln"> h4</span><span class="pun">:</span> <span class="lit">1.663rem</span><span class="pun">,</span><span class="pln"> p</span><span class="pun">:</span> <span class="lit">1.25rem</span> <span class="pun">);</span> <span class="com">/* * Modular scale * http://www.modularscale.com/?1.25&em&1.25&web&text */</span><span class="pln"> $type</span><span class="pun">-</span><span class="pln">scale</span><span class="pun">-</span><span class="pln">medium</span><span class="pun">:</span> <span class="pun">(</span><span class="pln"> h1</span><span class="pun">:</span> <span class="lit">3.052rem</span><span class="pun">,</span><span class="pln"> h2</span><span class="pun">:</span> <span class="lit">2.441rem</span><span class="pun">,</span><span class="pln"> h3</span><span class="pun">:</span> <span class="lit">1.953em</span><span class="pun">,</span><span class="pln"> h4</span><span class="pun">:</span> <span class="lit">1.563rem</span><span class="pun">,</span><span class="pln"> p</span><span class="pun">:</span> <span class="lit">1.25rem</span><span class="pun">,</span> <span class="pun">);</span> <span class="com">/* * Modular scale * http://www.modularscale.com/?1.1&em&1.25&web&text */</span><span class="pln"> $type</span><span class="pun">-</span><span class="pln">scale</span><span class="pun">-</span><span class="pln">small</span><span class="pun">:</span> <span class="pun">(</span><span class="pln"> h1</span><span class="pun">:</span> <span class="lit">2.686rem</span><span class="pun">,</span><span class="pln"> h2</span><span class="pun">:</span> <span class="lit">2.148rem</span><span class="pun">,</span><span class="pln"> h3</span><span class="pun">:</span> <span class="lit">1.719rem</span><span class="pun">,</span><span class="pln"> h4</span><span class="pun">:</span> <span class="lit">1.375rem</span><span class="pun">,</span><span class="pln"> p</span><span class="pun">:</span> <span class="lit">1.1rem</span> <span class="pun">);</span><span class="pln"> $breakpoint</span><span class="pun">-</span><span class="pln">medium</span><span class="pun">:</span> <span class="lit">75em</span><span class="pun">;</span><span class="pln"> $breakpoint</span><span class="pun">-</span><span class="pln">small</span><span class="pun">:</span> <span class="lit">45em</span><span class="pun">;</span> <span class="lit">@mixin</span><span class="pln"> size</span><span class="pun">(</span><span class="pln">$level</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">-</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">$type</span><span class="pun">-</span><span class="pln">scale</span><span class="pun">-</span><span class="pln">large</span><span class="pun">,</span><span class="pln"> $level</span><span class="pun">);</span> <span class="lit">@media</span> <span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> $breakpoint</span><span class="pun">-</span><span class="pln">medium</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">-</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">$type</span><span class="pun">-</span><span class="pln">scale</span><span class="pun">-</span><span class="pln">medium</span><span class="pun">,</span><span class="pln"> $level</span><span class="pun">);</span> <span class="pun">}</span> <span class="lit">@media</span> <span class="pun">(</span><span class="pln">max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> $breakpoint</span><span class="pun">-</span><span class="pln">small</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> map</span><span class="pun">-</span><span class="kwd">get</span><span class="pun">(</span><span class="pln">$type</span><span class="pun">-</span><span class="pln">scale</span><span class="pun">-</span><span class="pln">small</span><span class="pun">,</span><span class="pln"> $level</span><span class="pun">);</span> <span class="pun">}</span> <span class="pun">}</span> <span class="com">// Example</span> <span class="pun">.</span><span class="pln">title </span><span class="pun">{</span> <span class="lit">@include</span><span class="pln"> size</span><span class="pun">(</span><span class="pln">h1</span><span class="pun">);</span> <span class="pun">}</span> |
擴充套件閱讀:
垂直距離
文字間的垂直距離是由 line-height, margin, 和padding構建出來的.
line-height不應該帶有單位。比較寬的容器裡面文字的行高會大一些，而那些比較窄的容器裡面行高相對來說小一些會比較合適。- 為那些具有單方向的文字元素新增margin屬性，建議使用
margin-bottom. - 要遵循距離原則.
垂直節律
垂直節律是指元素之間的垂直間隔要保持一致性。這一點十分重要，它可以帶給讀者視覺上放鬆的享受，給他們一種親近的感覺。
建立垂直節律很簡單。首先，確定你使用的基礎垂直內間距和基礎垂直外間距的數值。然後，為你的容器，文字性元素或者其他相關元素的單方向的外邊距（或者內邊距）應用這個數值。如果你需要制製造更大的間隔的話，應用這個數值的倍數就好啦!
將基礎間距的數值設定成與行高相同的數值，這樣你的文字就像寫在一個條格紙上那樣整齊，就像我們傳統的印刷字型設計的那樣。然而，想要文字擁有垂直節律不一定需要按照上面的方法來做，只要你設定了一個基礎間距，並且使得其他間距都是由這個間距成倍的得來的，那樣就可以了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<span class="pln">body </span><span class="pun">{</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span> <span class="lit">1.4</span><span class="pun">;</span> <span class="com">// Base line height</span> <span class="pun">}</span><span class="pln"> p </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">1.25em</span><span class="pun">;</span> <span class="com">// Base font size</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span> <span class="lit">1.75rem</span><span class="pun">;</span> <span class="com">// Base vertical spacing: (1.4 * 1.25) = 1.75</span> <span class="pun">}</span><span class="pln"> h1 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">3em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span> <span class="lit">3.5rem</span><span class="pun">;</span> <span class="com">// Double the base value for a larger gap (1.75 * 2) = 3.5</span> <span class="pun">}</span><span class="pln"> h2 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">2em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span> <span class="lit">1.75rem</span><span class="pun">;</span> <span class="pun">}</span><span class="pln"> h3 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span> <span class="lit">1.75rem</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">page</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span> <span class="lit">3.5rem</span> <span class="lit">2rem</span><span class="pun">;</span> <span class="com">// 3.5 is double the base value</span> <span class="pun">}</span> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<span class="com">/* Simple Sass Implementation */</span><span class="pln"> $base</span><span class="pun">-</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span> <span class="lit">1.4</span><span class="pun">;</span><span class="pln"> $base</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">1.25rem</span><span class="pun">;</span><span class="pln"> $vertical</span><span class="pun">-</span><span class="pln">rhythm</span><span class="pun">:</span><span class="pln"> $base</span><span class="pun">-</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height </span><span class="pun">*</span><span class="pln"> $base</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">;</span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> $base</span><span class="pun">-</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">;</span> <span class="pun">}</span><span class="pln"> p </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> $base</span><span class="pun">-</span><span class="pln">font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> $vertical</span><span class="pun">-</span><span class="pln">rhythm</span><span class="pun">;</span> <span class="pun">}</span><span class="pln"> h1 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">3em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> $vertical</span><span class="pun">-</span><span class="pln">rhythm </span><span class="pun">*</span> <span class="lit">2</span><span class="pun">;</span> <span class="pun">}</span><span class="pln"> h2 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">2em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> $vertical</span><span class="pun">-</span><span class="pln">rhythm</span><span class="pun">;</span> <span class="pun">}</span><span class="pln"> h3 </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> $vertical</span><span class="pun">-</span><span class="pln">rhythm</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">.</span><span class="pln">page</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span> <span class="pun">(</span><span class="pln">$vertical</span><span class="pun">-</span><span class="pln">rhythm </span><span class="pun">*</span> <span class="lit">2</span><span class="pun">)</span> <span class="lit">2rem</span><span class="pun">;</span> <span class="pun">}</span> |
Note that rem is used for spacing as it is not influenced by the font-size of the element.
文字底部對齊基線網格
文字底部對齊基線是垂直節律的一個更為嚴格的實現。在網頁中，文字通常在line-height間居中對齊.但對於較大的文字來說會比較討厭，因為這樣做會導致在頂部和底部留有太多的空間。在傳統印刷的時候，這個問題一般會通過讓文字對齊基線網格的底部得以解決。
我們也可以通過為較大的文字新增一個負的margin-top和一個較小的margin-bottom，不需要使用基線網格而解決這個問題。
為不同的字型樣式、字型大小和解析度新增一個底部對齊的基線網格並不是一個很容易的方式，所以強烈建議你使用一個字型排版基線庫例如 Sassline 或者 MegaType.
注意，垂直節律只是一個建議，而且基線網格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規律，也不用在每個元素中都去追求畫素級別的完美。
擴充套件閱讀:
- Why is Vertical Rhythm an Important Typography Practice?
- Aligning type to baseline the right way using SASS
- Is Web Typography Completely Broken?
- Single-direction Margin Declarations
顏色
顏色可以很大程度上的增加視覺辨識度，是字型排版中一個重要的組成部分。
- 不要隨心所欲的挑選顏色，建議使用顏色板，建議你使用 Material Design colors 和 Flat UI colors 中提供的顏色板進行顏色選擇.
- 不要過度濫用一個顏色，因為這樣會造成辨識度的降低，同樣也不要使用很多完全不同的顏色。
- 遵循相似原則.
- 不建議使用純黑
#000作為你的正文顏色，你可以選擇一個非常灰的顏色如#333. - 有時候，使用透明顏色比使用淺色會更好一些，如果你深入的瞭解，可以點選這裡 。
- 確保文字和背景有較大的對比度，你可以使用 這個對比度檢測工具 幫助你進行選擇.
####擴充套件閱讀:
下劃線
在印刷品裡，永遠都不要使用到下劃線，因為這樣做會影響文字的閱讀，重點是，它很醜！Practical Typography
一般的來說，在網頁中下劃線也會看起來並不美好！幸運的是， background-image 就包含一個方法，它可以使得下劃線變得好看一點。 下面是Adam Schwartz使用Sass實現的下劃線的例子 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<span class="lit">@mixin</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">underline</span><span class="pun">-</span><span class="pln">crop</span><span class="pun">(</span><span class="pln">$background</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span> <span class="pun">.</span><span class="lit">03em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">-.</span><span class="lit">03em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="lit">0</span> <span class="pun">.</span><span class="lit">03em</span><span class="pln"> $background</span><span class="pun">,</span> <span class="lit">0</span> <span class="pun">-.</span><span class="lit">03em</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">06em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">-.</span><span class="lit">06em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">09em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">-.</span><span class="lit">09em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">12em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">-.</span><span class="lit">12em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">.</span><span class="lit">15em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">,</span> <span class="pun">-.</span><span class="lit">15em</span> <span class="lit">0</span><span class="pln"> $background</span><span class="pun">;</span> <span class="pun">}</span> <span class="lit">@mixin</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">background</span><span class="pun">(</span><span class="pln">$color</span><span class="pun">-</span><span class="pln">bg</span><span class="pun">,</span><span class="pln"> $color</span><span class="pun">-</span><span class="pln">text</span><span class="pun">)</span> <span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">image</span><span class="pun">:</span><span class="pln"> linear</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">$color</span><span class="pun">-</span><span class="pln">text</span><span class="pun">,</span><span class="pln"> $color</span><span class="pun">-</span><span class="pln">text</span><span class="pun">);</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span> <span class="lit">1px</span> <span class="lit">1px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">repeat</span><span class="pun">:</span><span class="pln"> repeat</span><span class="pun">-</span><span class="pln">x</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">position</span><span class="pun">:</span> <span class="lit">0</span><span class="pun">%</span> <span class="lit">95</span><span class="pun">%;</span> <span class="pun">}</span> <span class="lit">@mixin</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">selection</span><span class="pun">(</span><span class="pln">$selection</span><span class="pun">)</span> <span class="pun">{</span> <span class="pun">&::</span><span class="pln">selection </span><span class="pun">{</span> <span class="lit">@include</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">underline</span><span class="pun">-</span><span class="pln">crop</span><span class="pun">(</span><span class="pln">$selection</span><span class="pun">);</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> $selection</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">&::-</span><span class="pln">moz</span><span class="pun">-</span><span class="pln">selection </span><span class="pun">{</span> <span class="lit">@include</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">underline</span><span class="pun">-</span><span class="pln">crop</span><span class="pun">(</span><span class="pln">$selection</span><span class="pun">);</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> $selection</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">}</span> <span class="lit">@mixin</span><span class="pln"> link</span><span class="pun">-</span><span class="pln">underline</span><span class="pun">(</span><span class="pln">$background</span><span class="pun">,</span><span class="pln"> $text</span><span class="pun">,</span><span class="pln"> $selection</span><span class="pun">){</span> <span class="lit">@include</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">underline</span><span class="pun">-</span><span class="pln">crop</span><span class="pun">(</span><span class="pln">$background</span><span class="pun">);</span> <span class="lit">@include</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">background</span><span class="pun">(</span><span class="pln">$background</span><span class="pun">,</span><span class="pln"> $text</span><span class="pun">);</span> <span class="lit">@include</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">selection</span><span class="pun">(</span><span class="pln">$selection</span><span class="pun">);</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> $text</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">decoration</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span> <span class="pun">*,</span> <span class="pun">*:</span><span class="pln">after</span><span class="pun">,</span> <span class="pun">&:</span><span class="pln">after</span><span class="pun">,</span> <span class="pun">*:</span><span class="pln">before</span><span class="pun">,</span> <span class="pun">&:</span><span class="pln">before </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">&:</span><span class="pln">visited </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> $text</span><span class="pun">;</span> <span class="pun">}</span> <span class="pun">}</span> <span class="com">/* Example usage */</span><span class="pln"> a </span><span class="pun">{</span> <span class="lit">@include</span><span class="pln"> link</span><span class="pun">-</span><span class="pln">underline</span><span class="pun">(#</span><span class="pln">fff</span><span class="pun">,</span> <span class="com">#333, #0CBF);</span> <span class="pun">}</span> |
建議你只在有連結的地方使用下劃線，這是大多是網站都遵循的規律，如果不這麼做的話，可能會引起誤解。
擴充套件閱讀:
總結
恭喜你，你已經快讀完這篇手冊了。在web，這種使用者可以在任何解析度的裝置上使用的媒介上進行字型排版是及其困難的。在很多年前，當我第一次開始設計網頁的時候，我發現幾乎找不到最新的關於最佳WEB字型排版實踐的資訊。很多專家發表的部落格文章內容相互矛盾，而且很多市面上的web字型排版的書籍也很少談及具體技術應用的細節。字型排版手冊希望可以解決這個問題，並且為菜鳥們提供應該瞭解的關於如何建立符合字型排版工業標準的全部知識。我希望這個成果可以令你滿意。