[譯] 使用 CSS 的 font-size-adjust 屬性改善網頁排版

<b>本文講的是[譯] 使用 CSS 的 font-size-adjust 屬性改善網頁排版，</b>

<b></b>

你通路的網站大多都是由文本組成的，由于書面文字是網站的重要組成部分，是以就很值得把注意力放到你用來顯示資訊的字型上面。選對正确的字型能帶給使用者愉快的閱讀體驗，然而，使用不恰當的字型則會使網站變得難以閱讀。當你決定将要使用什麼字型後，一般你就會再給這個字型選擇一個合适的大小。

<code>font-size</code>　屬性會設定網頁中所有 <code>font-family</code> 下你想使用的字型的大小，然而在大多數情況下，浏覽器一般都是使用 <code>font-family</code> 下聲明的第一種字型。隻有當第一種字型因為某些原因不可用時，浏覽器才會使用候選字型繼續渲染頁面。

舉個例子，看下面的代碼：

字型的外觀尺寸及其可讀性可能會因為 <code>font-size</code> 的值而産生很大的變化，特别像是對拉丁文這種文字會導緻其在大小寫之間差别巨大。在這種情況下，小寫字母與對應的大寫字母的高度比例是決定一種字型易讀性的重要因素，這個比值通常被叫做一種字型的縱橫比。

正如我之前說的，一旦你設定了 <code>font-size</code> 的值，這個值将會對所有的字型起作用。如果候選字型的縱橫比跟首選字型的縱橫比相差太大，這可能影響候選字型的易讀性。

現在你知道使用 <code>font-size-adjust</code> 屬性的重要性了吧，是時候把它用到你的網站上了。這個屬性的文法如下：

<code>none</code> 是預設值，這個值意味着不調整字型的大小。

你也可以設定屬性的值為一個數字，這個數字将用來計算一張網頁上所有字型的 x 軸高度，x 軸高度等于這個數字乘以 <code>font-size</code> 的值。 這可以提高小尺寸字型的可讀性。以下是一個使用 <code>font-size-adjust</code> 屬性的例子：

所有字型的 x 軸高度現在是 20px * 0.6 = 12px，一種字型的實際大小現在可以被修改以確定 x 軸高度總是等于 12px。調整後 <code>font-size</code> 的值可以通過以下公式計算

這裡， <code>c</code> 指調整後的 <code>font-size</code>，<code>s</code> 指原先指定的 <code>font-size</code>，a 是 <code>font-size-adjust</code> 屬性指定的縱橫比，<code>a'</code> 指實際字型的縱橫比。

你不能設定 <code>font-size-adjust</code> 的值為負數，設定為 0 則會緻使文字沒有高度，換句話說，就是文字會被隐藏。在舊的浏覽器中，例如 Firefox 40，如果設定其屬性值為 0 則相當于設定為<code>none</code>。

大多數情況下，開發者一般會嘗試不同的 <code>font-size</code> 取值以确定哪個值對給定的字型最好看。這意味着在理想情況下，他們希望所有字型的 x 軸高度與首選字型的 x 軸高度相等。換句話說，最合适的 <code>font-size-adjust</code> 取值就是你首選字型的縱橫比。

要确定一種字型合适的縱橫比，你可以憑實際經驗就是調整後的字型大小應該跟原來聲明的字型大小一樣。這就是說上面公式中的 <code>a</code> 應該跟 <code>a'</code> 相等。

計算縱橫比的第一步是先建立 2 個 <code>&lt;span&gt;</code> 元素，每個 <code>&lt;span&gt;</code> 元素将會包含一個字母和一個包圍着字母的邊框（因為我們要進行比較，是以每個 <code>&lt;span&gt;</code> 中的字母都必須相同）。同時，每個元素的 <code>font-size</code> 屬性值都應該相同，但隻有一個元素會使用 <code>font-size-adjust</code> 屬性。當 <code>font-size-adjust</code> 的值等于給定字型的縱橫比時，每個 <code>&lt;span&gt;</code> 下的字母都是一樣的大小。

在下面的 demo 中，我建立了一個邊框圍繞着字母 ‘t’ 和 ‘b’ 并且對每組字母應用了不同的<code>font-size-adjust</code> 屬性值。

以下是相關代碼：

正如下面 demo 所示，<code>font-size-adjust</code> 的值越大則字母會顯得越大，反之則越小，當該值等于縱橫比時，每組字母的尺寸都相等。

<a href="https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2FSitePoint%2Fpen%2FYxxbMp" target="_blank"></a>

以下 demo 使用的 <code>font-size-adjust</code> 取值于上一個 CodePen demo 中為 ‘Lato’ 字型設定的值，現在将會用來調整 ‘Verdana’ 這個候選字型。會有一個按鈕控制修改是否發生，是以你可以看出修改前後的變化：

<a href="https://link.juejin.im/?target=https%3A%2F%2Fcodepen.io%2FSitePoint%2Fpen%2FKvvLOr" target="_blank"></a>

當你處理大量文字時效果會更加引人注目，然而上面的例子應該足夠讓你認識到這個屬性的有用之處。

目前，隻有 Firefox 預設支援 <code>font-size-adjust</code> 屬性。Chrome 和 Opera 分别從 43 和 30 版本開始作為試驗特性予以支援，開發者需前往 chrome://flags 中開啟 “Experimental Web Platform Features” 選項。Edge 和 Safari 不支援這個屬性。

如果你決定使用這個屬性，低版本浏覽器的支援将不成問題，這個屬性被設計時就已經考慮到向後相容性，不支援的浏覽器會正常的顯示文本，支援的浏覽器則會基于該屬性的值調整字型大小。

讀完這篇文章後，你應該知道 <code>font-size-adjust</code> 屬性是什麼，為什麼它很重要以及如何計算出不同字型的縱橫比。

因為 <code>font-size-adjust</code> 在舊浏覽器中優雅降級，你今天就可以直接應用該屬性到你的生産環境中，以便提高頁面文字易讀性。

你還有其他工具或方法可以幫助開發者更快地計算縱橫比嗎？留言告訴他們吧。

<b>原文釋出時間為：2017年9月13日</b>

<b>本文來自雲栖社群合作夥伴掘金，了解相關資訊可以關注掘金網站。</b>