CSS 中的 font-size-adjust 屬性允許開發(fā)者基于小寫字母的高度指定 font-size ，這可以有效地提高網(wǎng)頁文字的可讀性。

在這篇文章中，你不僅能了解到font-size-adjust 屬性的重要性，并且還能學(xué)會(huì)如何在你的項(xiàng)目中使用它。

font-size-adjust 的重要性

你訪問的網(wǎng)站大多都是由文本組成的，由于書面文字是網(wǎng)站的重要組成部分，因此就很值得把注意力放到你用來顯示信息的字體上面。選對(duì)正確的字體能帶給用戶愉快的閱讀體驗(yàn)，然而，使用不恰當(dāng)?shù)淖煮w則會(huì)使網(wǎng)站變得難以閱讀。當(dāng)你決定將要使用什么字體后，一般你就會(huì)再給這個(gè)字體選擇一個(gè)合適的大小。

font-size　屬性會(huì)設(shè)置網(wǎng)頁中所有 font-family 下你想使用的字體的大小，然而在大多數(shù)情況下，瀏覽器一般都是使用 font-family 下聲明的第一種字體。只有當(dāng)?shù)谝环N字體因?yàn)槟承┰虿豢捎脮r(shí)，瀏覽器才會(huì)使用候選字體繼續(xù)渲染頁面。

舉個(gè)例子，看下面的代碼：

如果你的瀏覽器從 Google Fonts 下載的 ‘Lato’ 字體不可用時(shí)，在這種情況下，Verdana 字體就會(huì)被使用。但是，腦海里 font-size 的值好像是針對(duì) ‘Lato’ 字體設(shè)定的，而不是 Verdana。

什么是字體的縱橫比？

字體的外觀尺寸及其可讀性可能會(huì)因?yàn)?font-size 的值而產(chǎn)生很大的變化，特別像是對(duì)拉丁文這種文字會(huì)導(dǎo)致其在大小寫之間差別巨大。在這種情況下，小寫字母與對(duì)應(yīng)的大寫字母的高度比例是決定一種字體易讀性的重要因素，這個(gè)比值通常被叫做一種字體的縱橫比。

正如我之前說的，一旦你設(shè)置了 font-size 的值，這個(gè)值將會(huì)對(duì)所有的字體起作用。如果候選字體的縱橫比跟首選字體的縱橫比相差太大，這可能影響候選字體的易讀性。

font-size-adjust 屬性在這種情形下則扮演著一個(gè)尤為重要的角色，因?yàn)樗试S你設(shè)置所有字體的 x 軸高度 為統(tǒng)一大小，以便提高文字的易讀性。

給 font-size-adjust 屬性選擇合適的值

現(xiàn)在你知道使用 font-size-adjust 屬性的重要性了吧，是時(shí)候把它用到你的網(wǎng)站上了。這個(gè)屬性的語法如下：

none 是默認(rèn)值，這個(gè)值意味著不調(diào)整字體的大小。

你也可以設(shè)置屬性的值為一個(gè)數(shù)字，這個(gè)數(shù)字將用來計(jì)算一張網(wǎng)頁上所有字體的 x 軸高度，x 軸高度等于這個(gè)數(shù)字乘以 font-size 的值。 這可以提高小尺寸字體的可讀性。以下是一個(gè)使用 font-size-adjust 屬性的例子：

所有字體的 x 軸高度現(xiàn)在是 20px * 0.6 = 12px，一種字體的實(shí)際大小現(xiàn)在可以被修改以確保 x 軸高度總是等于 12px。調(diào)整后 font-size 的值可以通過以下公式計(jì)算