通過CSS字體尺寸調整，改進網絡版式

CSS font-size-adjust 屬性：提升網頁排版可讀性的利器

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

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

font-size-adjust 的重要性

大多數網站主要由文本構成。由於文字在網站中至關重要，因此特別關注所使用的字體就顯得尤為必要。選擇合適的字體能帶來愉悅的閱讀體驗，反之則可能導致網站難以閱讀。確定字體後，通常需要選擇合適的字體大小。

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

例如，給定以下 CSS 規則：

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

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

網頁字體的縱橫比

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

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

font-size-adjust 屬性在這種情況下就顯得非常重要，因為它允許您將所有字體的 x 高度設置為相同的值，從而提高其可讀性。

選擇合適的 font-size-adjust 值

現在您已經了解了使用 font-size-adjust 屬性的重要性，接下來學習如何在您的網站上使用它。此屬性具有以下語法：

font-size-adjust: none | <number>

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

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

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

現在所有字體的 x 高度都將為 20px * 0.6 = 12px。現在可以更改給定字體的實際大小，以確保 x 高度始終保持在 12px。可以使用以下公式計算給定字體的新的調整後的字體大小：

c = (a / a') s。

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

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

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

如何確定字體的縱橫比

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

計算縱橫比的第一步是創建兩個元素。這兩個元素都將包含單個字母及其周圍的邊框（這兩個字母必須相同，因為我們需要在這兩個元素之間進行比較）。此外，這兩個元素的 font-size 屬性值都相同，但其中只有一個元素也將使用 font-size-adjust 屬性。當 font-size-adjust 的值等於給定字體的縱橫比時，每個元素中的兩個字母的大小都將相同。

在網站上使用 font-size-adjust

瀏覽器支持：目前，只有 Firefox 默認支持 font-size-adjust。從 43 版和 30 版開始，Chrome 和 Opera 在“實驗性 Web 平台功能”標誌（可在 chrome://flags 中啟用）之後支持此屬性。 Edge 和 Safari 完全不支持 font-size-adjust 屬性。

如果您決定使用此屬性，較低的瀏覽器支持根本不應該成為問題。此屬性的設計考慮了向後兼容性。不支持此屬性的瀏覽器將正常顯示文本，而支持此屬性的瀏覽器將根據 font-size-adjust 屬性的值調整字體大小。

結論

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

由於 font-size-adjust 在舊版瀏覽器中可以優雅地降級，因此您可以立即開始使用它來提高生產網站中文本的可讀性。

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

以上是通過CSS字體尺寸調整，改進網絡版式的詳細內容。更多資訊請關注PHP中文網其他相關文章！