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

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

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

font-size-adjust 的重要性

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

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

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

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

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

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

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

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

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

選擇合適的 font-size-adjust 值

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

font-size-adjust: none | <number>

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

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

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

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

c = (a / a') s。

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

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

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

如何確定字體的縱橫比

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

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

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

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

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

結(jié)論

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

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

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

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