CSS font-size-adjust 屬性：提升網(wǎng)頁排版可讀性的利器

font-size-adjust CSS 屬性允許開發(fā)者根據(jù)小寫字母的高度而非大寫字母的高度來指定字體大小，從而顯著提升網(wǎng)頁文本的可讀性，尤其在使用備用字體時效果顯著。

本文將深入探討 font-size-adjust 屬性的重要性及其在項(xiàng)目中的正確使用方法。

font-size-adjust 的重要性

大多數(shù)網(wǎng)站主要由文本構(gòu)成。由于文字在網(wǎng)站中至關(guān)重要，因此特別關(guān)注所使用的字體就顯得尤為必要。選擇合適的字體能帶來愉悅的閱讀體驗(yàn)，反之則可能導(dǎo)致網(wǎng)站難以閱讀。確定字體后，通常需要選擇合適的字體大小。

font-size 屬性設(shè)置網(wǎng)站上所有字體系列的字體大小。然而，它通常是針對首選字體系列進(jìn)行選擇的。當(dāng)首選字體由于某種原因不可用時，瀏覽器會使用 CSS 文檔中列出的備用字體之一來呈現(xiàn)文本，問題就出現(xiàn)了。

例如，給定以下 CSS 規(guī)則：

body {
  font-family: 'Lato', Verdana, sans-serif;
}

如果瀏覽器無法從 Google Fonts 下載“Lato”，則會改用下一個備用字體 Verdana。然而，font-size 值很可能是在考慮“Lato”的情況下選擇的，而不是 Verdana。

網(wǎng)頁字體的縱橫比

對于恒定的字體大小值，字體的視覺大小及其可讀性可能差異很大。對于區(qū)分大小寫字母的拉丁文等文字尤其如此。在這種情況下，小寫字母高度與其大寫字母高度的比率是決定字體可讀性的重要因素。此比率通常稱為字體的縱橫比。

如前所述，一旦設(shè)置了 font-size 值，它將對所有字體系列保持不變。但是，如果備用字體的縱橫比與首選字體的縱橫比差異過大，則可能會影響備用字體的可讀性。

font-size-adjust 屬性在這種情況下就顯得非常重要，因?yàn)樗试S您將所有字體的 x 高度設(shè)置為相同的值，從而提高其可讀性。

選擇合適的 font-size-adjust 值

現(xiàn)在您已經(jīng)了解了使用 font-size-adjust 屬性的重要性，接下來學(xué)習(xí)如何在您的網(wǎng)站上使用它。此屬性具有以下語法：

font-size-adjust: none | <number>

font-size-adjust 的初始值為 none。 none 值表示不會調(diào)整不同字體系列的 font-size 值。

您還可以將 font-size-adjust 屬性的值設(shè)置為一個數(shù)字。此數(shù)字用于將網(wǎng)頁上所有字體的 x 高度計(jì)算為相同的值。x 高度等于給定數(shù)字乘以字體大小。這可以相當(dāng)大地提高小尺寸字體的可讀性。以下是如何使用 font-size-adjust 屬性的示例：

body {
  font-family: 'Lato', Verdana, sans-serif;
}

現(xiàn)在所有字體的 x 高度都將為 20px * 0.6 = 12px?，F(xiàn)在可以更改給定字體的實(shí)際大小，以確保 x 高度始終保持在 12px?？梢允褂靡韵鹿接?jì)算給定字體的新的調(diào)整后的字體大?。?/p>

c = (a / a') s。

這里，c 是要使用的調(diào)整后的字體大小，s 是指定的字體大小值，a 是 font-size-adjust 屬性指定的縱橫比，a' 是需要調(diào)整的字體的縱橫比。

您不能將 font-size-adjust 設(shè)置為負(fù)值。值為 0 將導(dǎo)致文本沒有高度，換句話說，文本實(shí)際上會被隱藏。在較舊的瀏覽器（如 Firefox 40）中，值為 0 等效于將 font-size-adjust 設(shè)置為 none。

在大多數(shù)情況下，開發(fā)人員通常會嘗試幾個字體大小值，以查看哪個值最適合給定的字體。這意味著理想情況下，他們希望所有字體選項(xiàng)的 x 高度等于其首選字體的 x 高度。換句話說，font-size-adjust 屬性最合適的值是首選字體的縱橫比。

如何確定字體的縱橫比

要確定字體的正確縱橫比，您可以依賴這樣一個事實(shí)：其調(diào)整后的字體大小應(yīng)與您指定的原始字體大小相同。這意味著在前面的等式中，a 應(yīng)該等于 a'。

計(jì)算縱橫比的第一步是創(chuàng)建兩個元素。這兩個元素都將包含單個字母及其周圍的邊框（這兩個字母必須相同，因?yàn)槲覀冃枰谶@兩個元素之間進(jìn)行比較）。此外，這兩個元素的 font-size 屬性值都相同，但其中只有一個元素也將使用 font-size-adjust 屬性。當(dāng) font-size-adjust 的值等于給定字體的縱橫比時，每個元素中的兩個字母的大小都將相同。

在網(wǎng)站上使用 font-size-adjust

瀏覽器支持：目前，只有 Firefox 默認(rèn)支持 font-size-adjust。從 43 版和 30 版開始，Chrome 和 Opera 在“實(shí)驗(yàn)性 Web 平臺功能”標(biāo)志（可在 chrome://flags 中啟用）之后支持此屬性。Edge 和 Safari 完全不支持 font-size-adjust 屬性。

如果您決定使用此屬性，較低的瀏覽器支持根本不應(yīng)該成為問題。此屬性的設(shè)計(jì)考慮了向后兼容性。不支持此屬性的瀏覽器將正常顯示文本，而支持此屬性的瀏覽器將根據(jù) font-size-adjust 屬性的值調(diào)整字體大小。

結(jié)論

閱讀完本教程后，您現(xiàn)在知道了 font-size-adjust 屬性的作用、其重要性以及如何計(jì)算不同字體的縱橫比。

由于 font-size-adjust 在舊版瀏覽器中可以優(yōu)雅地降級，因此您可以立即開始使用它來提高生產(chǎn)網(wǎng)站中文本的可讀性。

(文章末尾的圖片與文章開頭相同)

以上是通過CSS字體尺寸調(diào)整，改進(jìn)網(wǎng)絡(luò)版式的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！