[譯] Web 流式文字排版的現狀

• 原文地址：The State of Fluid Web Typography

• 原文做者：Matej Latin

• 譯文出自：掘金翻譯計劃

• 本文永久連接：github.com/xitu/gold-m…

• 譯者：Jenniferyingni

• 校對者：smilemuffie, mymmon

Web 流式文字排版能夠提高用戶的網站閱讀體驗，但與此同時，它也帶來了字體不受控制變大的問題和對瀏覽器無障礙訪問功能使用的影響。那麼 Web 流式文字排版到底可否在實踐中被應用呢？

請注意本文使用了 GIF 動畫來演示使用響應式/流式文字排版的實現效果，移動端設備的訪問者可能閱讀上會有必定影響。

瀏覽器對視口單位（vw, vh, vmin, vmax）的支持已經有一段時間了。從這裏看來，大多數瀏覽器在 2013-2014 年就開始徹底兼容這些單位。微軟的 Edge 是一個例外（並不驚訝），在 2017 年 10 月發佈的 Edge 16 纔開始兼容，可是也過去了兩年的時間。爲何其餘主流瀏覽器已經兼容視口單位長達 5-6 年的時間，咱們仍是不多看到採用流式文字排版的網頁呢？我必須認可，我是那種訪問網頁時會調整瀏覽器窗口大小來看頁面如何適應窗口大小變化的人之一。我常常這樣作，可是我已經不記得上一次發現使用流式文字排版的網站是何時了。除了 CSS Tricks 以外想不到其餘的例子。所以我就開始思考，爲何這種網頁文字排版技巧沒有被普遍的使用呢？

回答這個問題並無那麼容易，由於緣由並非單方面的。我認爲能夠歸結爲如下幾個：

1. 好的響應式 Web 設計/開發仍然是困難和複雜的。

2. Web 文字排版仍舊沒有引發設計者/開發者的重視。

3. 潛在的對瀏覽器無障礙訪問功能的影響。

4. 流式文字排版是比較難實現的。

讓咱們來仔細分析下每一個緣由。

好的響應式 Web 設計仍然是困難和複雜的

最耗費精力的是上面列出的第一個問題。和之前相比，響應式頁面設計工具的進步使得構建一個好的響應式網站變得容易多了，可是仍然須要花費不少時間。在網頁設計過程當中，很大一部分時間花在了挑選符合功能需求的工具、測試工具、應用工具上。咱們尚未作到只需設計好一個屏幕寬度下的視覺稿，工具就能自動產生在其餘大多數屏幕寬度設備下的視覺顯示。好比，咱們仍然使用數字設計工具來繪製靜態的視覺稿，這與最終代碼實現的效果相差甚遠。這些工具連基本的響應式網頁設計都幾乎不支持，更別說實現流式文字排版了。

Web 文字排版沒有引發重視

第二個問題是我但願經過 Better Web Type 這個網站來改善的，在那裏有不少熱衷於研究樣式的極客們，但遺憾的是，只有這些人真正的關注網頁中文字排版的質量，仍然有許多的設計師和開發者認爲文字排版就是簡單的給選擇字體類型和調整字體大小。

流式字體佈局影響了無障礙訪問功能的使用

在設計和構建網站的時候，不多有人會考慮到瀏覽器的無障礙訪問功能。我想要在本文中特別關注一下這個問題。在你們尚未意識到這一點前，我就注意到流式文字排版對無障礙訪問功能的影響，而這個問題幾乎沒有被人說起。

流式文字排版是比較難實現的

使用視口單位來設置字體大小是棘手的。我收到過許多封這樣的郵件，有人告訴我他有嘗試過使用流式文字排版，可是最終並無選擇將其應用到實際的網站中。可是流式文字排版不該該是那麼難實現的，咱們須要讓它變得更容易，已經有許多聰明的人找到了對的方法。讓咱們來看看幾個不一樣的實現方法，而後討論哪一個方法是最佳實踐，哪一個方法讓流式佈局不那麼困難，變得更加的可控和更好。與此同時，咱們也將看看這些方法有沒有帶來相應的無障礙訪問問題。

響應式文字排版

那咱們從最多見的開始提及。咱們最開始探索流式文字排版實際上是從響應式文字排版開始的。若是採用如今最經常使用的網頁設計（響應式網頁設計），一般是從移動端佈局和字體大小開始，咱們一般會設定一個根節點的字體大小，而後在這個字體大小的基礎上去定義其它的大小。如下是一個最簡單的示例：

html {  font-size: 100%; // Usually 16 pixels}​h1 {  font-size: 3rem; // 3 × base font size (3 × 16px)}複製代碼

請注意，全部的代碼段均是使用了 SCSS。

在這裏咱們將根節點字體大小匹配瀏覽器的默認字體大小（一般是 16px）。若是要建立支持無障礙訪問功能的網站，這是很重要的一步，咱們稍後將會回過頭來看這一步。如今，咱們須要考慮到其餘不一樣屏幕大小的設備，從新給咱們的網頁佈局而且從新定義字體的大小。所以，咱們使用媒體查詢來定義佈局和字體大小發生變化的斷點。

html {  font-size: 100%;​  @media (min-width: 768px) {    font-size: 112.5%;  }}​h1 {  font-size: 3rem;​  @media (min-width: 768px) {    font-size: 3.5rem;  }}複製代碼

在上面的例子中，咱們從新定義了根節點的字體大小，咱們認爲平板電腦大小的尺寸是 768 px，並定義了在這個尺寸下合適的字體大小 。更大的屏幕有更多的空間，所以字體大小的改變也能夠更明顯。所以咱們將一級標題的大小從默認的 3rem 修改成了 3.5rem。

看看 CodePen 上這個響應式佈局的簡單示例。全部的瀏覽器都支持且沒有無障礙訪問的問題，那麼爲何咱們還要改進它呢？字體大小隻會在咱們定義的斷點發生改變，這是不少人會擔憂的問題。在上面的示例中，咱們網站的用戶會發現字體的大小一直爲 16px，直到屏幕的寬度變成了 768px 才發生變化。若是用戶在平板電腦上訪問咱們的網站，他看到的根節點的字體大小是 18px（112.5%）。在我看來，這個方法最主要的問題是他們過度關注了本身的觀點而忽略了用戶。若是調整窗口的大小將會看到這樣的現象：

響應式佈局：字體大小隻會在預約義的斷點處發生變化，這會致使字體像這樣發生突變。

是的，字體大小隻在咱們定義的斷點處發生變化，可是咱們忘記了用戶對於他們設備上的字體大小有絕對的控制權。若是他們從電腦端訪問而且以爲 18px 的字體大小不夠大，他們能夠輕易地調整（若是咱們沒有使用例如 px 同樣的非相對單位來覆蓋默認的字體大小）。

優勢

• 用戶保持對字體大小的控制權，沒有無障礙訪問問題。

• 運用得當的狀況下，少許的媒體查詢能夠覆蓋大部分不一樣屏幕寬度的設備。

缺點

• 字體大小在大多數狀況下是維持不變的且受限於事先定義的斷點（屏幕寬度）。

• 大屏幕上有大量的空白，字體大小不自適應，最終的網站將呈現爲居中的單列布局。

純流式文字排版

咱們得出的結論是響應式文字排版不是理想的解決方案。它勉強知足需求可是咱們想要有可以更好的控制字體大小的方案。咱們但願咱們的字體大小在任何屏幕尺寸都是理想的，而不只是在某個特定的移動端、平板或是電腦屏幕等。流式文字排版就是咱們的救星！

視口單位的引入已經有一段時間了。這個想法很簡單，咱們能夠在 CSS 中使用視口高度單位和視口寬度單位來定義任何元素的大小，包括字體大小。在我看來，視口單位被引入更可能是做爲絕對單位網頁佈局的一種擴展，這和 Sebastian Eberlein 在他的 Hacker Noon 上的文章中所作的描述的類似。

可是儘管如此，視口單位很長一段時間來都被用做流暢地縮放字體大小的方法。Chris Coyier 在 2012 年在文章中興奮地提到，一行文字理想的寬度大約是 80 個字符，「這些單位能讓你有完美的體驗，而且能將這種體驗擴展到全部大小的屏幕」^[1]。

這聽起來很酷，但實際上並不那麼簡單。假設咱們執行如下操做：

html {  font-size: 1.3vw;}​h1 {  font-size: 3vw;}複製代碼

咱們使用視口單位來定義根節點字體大小。這意味着在每此屏幕寬度變化時字體大小都會改變，而不是像響應式佈局同樣只在幾個預約義的斷點。可是由於屏幕的寬度的差異是很大的（移動端屏幕大小相比於筆記本或者是臺式電腦屏幕大小），因此字體的大小就會變化得很是快。來看一下 CodePen 上的 流式佈局示例，當你調整窗口的大小時，會看到這樣的現象：

純流式文字排版：字體大小根據屏幕寬度快速的變化。

是否注意到了字體在小屏幕（移動端）中的變化？最終的顯示效果過小了，那麼咱們如何能修復這個問題呢？

優勢

• 在實踐中，若是流式文字排版不和響應式佈局一塊兒使用的話，是毫無優點可言的。

缺點

• 影響無障礙訪問功能的使用（用戶在某些瀏覽器中不能控制字體的大小）。

• 會覆蓋用戶在瀏覽器中設置的默認的字體大小，這是另一個對無障礙訪問功能使用的影響。

• 字體會不受控制的快速變大或變小。

增長媒體查詢來改善實現效果

顯然純流式文字排版是知足不了需求的。諷刺的是，改善它的惟一辦法就是採用響應式文字排版來控制字體大小的快速變化。可是，與咱們前面的響應式文字排版例子不一樣的是，在這個案例中咱們使用了多個媒體查詢來限制字體大小的變化。咱們能夠這樣作：

$breakpoint-1: 25em;$breakpoint-2: 35em;...​html {  font-size: 1.3vw;}​h1 {  font-size: 3vw;}​@media (min-width: $breakpoint-1) {  html {    font-size: 2vw;  }    h1 {    font-size: 6vw;  }}​@media (min-width: $breakpoint-2) {  ...}複製代碼

在 CodePen 中看一下這個流式文字排版 + 響應式文字排版的例子 而且調整瀏覽器窗口的大小，你會發現效果比上面的純流式佈局要好不少，這基本知足了咱們的需求（示例中我使用了 7 個斷點）。

流式佈局 + 響應式佈局：限制了小屏幕和大屏幕中字體大小的變化。

我不知道你怎麼看，可是對我來講，這種作法的投入和產出比是不太理想的，我不否定它比純響應式文字排版實現的效果更好，可是它也引入了其它的問題，包括無障礙訪問的問題，這對我來講是沒法接受的。

優勢

• 字體大小的變化比較理想，且能適應全部的屏幕大小。

缺點

• 影響無障礙訪問功能的使用（用戶在某些瀏覽器中不能控制字體的大小）。

• 由於使用了媒體查詢來控制字體大小，在縮放屏幕大小的時候仍然會在斷點處發生突變。

• 會覆蓋用戶在瀏覽器中設置的默認的字體大小，這是另一個對無障礙訪問功能使用的影響。

帶CSS鎖的流式文字排版

另一批人注意到了流式文字排版字體大小不受控制變化的問題。他們知道增長許多的媒體查詢並非理想的解決方案，因此他們開始尋找另外的解決方案。Mike Riethmuller ^[2], Tim Brown ^[3] 和 Geoff Graham ^[4] 最終得出的結論都是帶 CSS 鎖的流式文字排版多是最好的方案。

這是一個頗有意思的方案。它設定了在小屏幕下適用的最小字體大小，以及在大屏幕下適用的最大字體大小。在這兩個屏幕大小中間的範圍，字體大小的變化就採用流式文字排版。這個方法使用基礎的數學原理優雅的解決了字體大小變化過快的問題。下圖能很好的解釋這種方法，字體大小隻在中間的區域發生變化，在左側和右側均不會變化。左邊的閥門是指最小的屏幕大小，咱們對其使用固定的字體大小，同理右邊的閥門是指最大的屏幕大小。

帶 CSS 鎖的流式文字排版，字體僅在中間部分變化大小。(連接)

實現這個功能的公式很是的簡單，須要用到四個變量：最小字體值、最大字體值、最小視口寬度、最大視口寬度。

body {  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));}複製代碼

訪問 CodePen 上帶 CSS 鎖的流式文字排版示例，調整瀏覽器窗口的大小將會看到下面的現象。

CSS 鎖定了變化。字體大小隻在特定的區間範圍內改變。

這個實現效果是使人滿意的。若是屏幕寬度介於最小值和最大值之間，字體大小能夠很好地縮放。若是屏幕寬度小於最小值或者是大於最大值，將切換到固定的字體大小。理論上是行得通的，可是當我在 Chrome 上改變了瀏覽器的默認字體大小，會發現沒有產生 CodePen 示例中的效果。這代表這個方法仍然忽略了可變的用戶默認字體大小，存在對無障礙訪問功能的影響。某些瀏覽器中用戶沒法改變字體的大小（在 Mac 上使用 ⌘+）。

優勢

• 調整瀏覽器窗口大小的時候字體大小不會在斷點突變。

• 當屏幕寬度小於最小值或者大於最大值時，字體大小不會改變。

缺點

• 影響無障礙訪問功能的使用（用戶在某些瀏覽器中不能控制字體的大小）。

• 會覆蓋用戶在瀏覽器中設置的默認的字體大小，這是另一個對無障礙訪問功能使用的影響。

結論 — 咱們是否應該使用流式文字排版？

乍一看，CSS 鎖彷佛是最佳的選擇，它解決了字體大小過大或者是太小的問題，只須要使用少許的媒體查詢而且字體變化過程當中避免了斷點突變。而使用流式文字排版的方案廣泛存在的一個問題是它們都覆蓋了瀏覽器中用戶設置的默認字體大小（在個人測試中，僅在 Chrome 中發現了這個問題）。在某些瀏覽器的某些狀況下，由於使用了視口單位用戶不能改變字體的大小。這意味着從無障礙訪問功能的角度來看，這些解決方案都不徹底符合要求。

流式文字排版與默認瀏覽器字體大小二者不能很好的地兼容，所以在這一問題解決以前不推薦使用。

在寫純流式文字排版時，我曾寫過「咱們但願咱們的字體大小在任何屏幕尺寸都是理想的，而不只是在某個特定的移動端、平板或是電腦屏幕等」。如今我以爲這個想法是徹底錯誤的，咱們不該該把關注點放在讓字體大小在全部窗口尺寸下合理地縮放，而應當放在如何讓每個用戶都能輕鬆且愉悅地閱讀網站的內容上。從這點來看，流式文字排版對用戶的干涉太多了。若是它能和瀏覽器默認字體大小很好地兼容，那我會鼓勵你們來使用，可是它沒有知足這一點，因此咱們認爲它不是一個能被採用的方案，至少如今還不是。正如我在書中探索流式文字排版時所說起的，我依舊堅持響應式文字排版。

若是你喜歡本文的內容，能夠在個人書中閱讀到更多的內容。這本書在設計師與前端開發者中很受歡迎，請必定不要錯過。

1. <a name="note1"></a>Viewport Sized Typography by Chris Coyier (連接)

2. <a name="note2"></a>Precise Control Over Responsive Typography by Mike Riethmuller (連接)

3. <a name="note3"></a>Flexible Typography with CSS Locks by Tim Brown (連接)

4. <a name="note4"></a>Fluid Typography by Geoff Graham (連接)

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。