提高網站易讀性的 7 個快速 CSS 技巧

每個網站都需要訪問者可以閱讀和分析的文本內容。 此內容可以是博客、文章或解釋網站各個區域的可理解網站內容的形式。 網站上的訪問者根據他們的要求閱讀網站上的某些內容。 但只有當網站上的文字清晰易讀時，他或她才能閱讀內容。 沒有易讀性，該站點只是圖像、鏈接和其他 Web 元素的集合。 因此，無論格式多長或短，網站內容都應該足夠清晰。 作為 Web 開發人員，您應該知道需要哪種類型的字體，或者需要哪種空間對齊方式。 這些參數在決定文本內容在網頁上的顯示方式和分解方式中起著至關重要的作用。

如今，Web 開發人員使用 CSS 來設計網站上的所有內容，包括外觀、字體和字體。 在這裡，本博客重點介紹特定的 CSS 提示和技巧，您可以在使用 CSS 時遵循這些提示和技巧來維護和增強網站的易讀性。

一、單位：

別針

有多種單位可以幫助您管理一段文本中的字體大小。 您需要根據您網站或網頁上的文本部分來了解哪個單元有用。 這些單位可以在您了解如何定義網頁的結構以及其上的文本對齊方式後確定。 還需要考慮查看設備的尺寸和讀者偏好等因素。 因此，當您認為特定於字體的單位時，em 和 rem 是您可以信賴的完美選擇。 當文本的大小趨於變化時，您可以使用 em 定義段落內的垂直邊距設置。 但是，如果在選定部分中將襯線字體替換為無襯線字體，則會產生瓶頸。 此外，相同大小的字體可能會隨著其係列的變化而出現不同。 一般來說，小寫字母“x”的大小是指其他字符的大小。

當我們使用 CSS 來處理我們網站的外觀時，我們可以考慮“font-size-adjust”屬性並渲染相同大小的字體。 因此，字符的高度可以匹配到小寫字母的高度。 您可以使用此代碼段來確保上述因素：

@supports（字體大小調整：1；）

{

文章{

字體大小調整：0.5；

{

}

2. 線高：

別針

黑色文本之間的白色區域定義了排版，這適用於我們即將設計網站或 Web 應用程序時。 在考慮行高、邊距和換行符時，我們應該非常注意。 您可以根據 x 高度的值來確定字體大小以優化行高。 默認情況下，瀏覽器提供的行高為 1.2，這是一個沒有特定單位的值。 此值是 Times New Roman 字體的正確值，但不適用於其他字體。 行距不會隨字體大小呈線性增長，它取決於文本類型等參數。 對於長格式內容，測試了特定字體，大小從 8 到 14 不等。這表明 x 高度與行距的比率下降到 37.6。 這些測試是針對打印在一張紙上的長篇內容進行的。

當我們考慮移動設備或其他設備的屏幕時，我們注意到設備上的內容需要文本行之間的正確間距。 因此，對於數字內容，該比率保持為 32。使用 CSS，您可以以代碼片段的形式定義該值，如下所示：

磷{

行高：calc(1ex/0.32)；

}

此代碼可讓您獲得與字體是來自 sans-serif 還是 serif 字體系列無關的最佳值。 當與排版相關的工具不可用時，相同的值是相關的。

三、尺度定義：

別針

在之前的字幕中，我們調整了字體的大小並使用值來確定行高。 更進一步，在考慮長篇內容時，我們需要確定排版比例以在段落之間放置適當的間距。 正如我們已經確定的那樣，行間距不會以線性形式增長，而是會根據文本的結構而變化。 在考慮大字體的標題時，我們需要有更大的行高比。 我們可以使用以下 CSS 代碼來定義它：

第 h1 條

{

字體大小：2.5em；

行高：計算（1ex / 0.42）；

保證金：計算（1ex / 0.42）0；

}

第h2條

{

字體大小：2em；

行高：計算（1ex / 0.42）；

保證金：計算（1ex / 0.42）0；

}

第h3條

{

字體大小：1.75em；

行高：計算（1ex / 0.38）；

保證金：計算（1ex / 0.38）0；

}

第h4條

{

字體大小：1.5em；

行高：計算（1ex / 0.37）；

保證金：計算（1ex / 0.37）0；

}

第 p 條

{

字體大小：1em；

行高：計算（1ex / 0.32）；

保證金：計算（1ex / 0.32）0；

}

上面的代碼幫助你根據標題所關心的字體大小來設置行高。 此外，長篇內容也可以從這段代碼中受益。

4. 字母和單詞的間距：

別針

在處理易讀性問題時，我們不應該忘記有閱讀障礙和其他學習障礙和挑戰的人。 圍繞發育性閱讀障礙的研究仍在研究中，這嚴重影響了閱讀能力。 在決定上述因素時，您應該始終考慮這些科學研究。 您的排版可以確定讀者如何閱讀您的內容的效果和後果。

有一個明確的證據證明，具有高度易讀性字體的字形對閱讀沒有幫助，但字符之間的間距卻可以。 因此，我們應該為網頁提供工具，讓您可以增加或減少字符之間的間距並更改字體的大小以增強可讀性。 您應該注意，這些控件應隨著字體大小的增加而增加字符之間的大小。 字體大小的減小也是如此。 您可以在 CSS 代碼片段中使用“letter-spacing”和“word-spacing”來關注字母間距和字間距。

但是當你使用“letter-spacing”時，它沒有考慮條件並且容易破壞字體的字距。 這會導致在網頁上呈現非最佳間距。 為了解決這個缺點，我們可以採用可變字體來控製字體在網頁上的呈現方式。 字體設計者應該參數化變量中的間距。 這有助於確定字形的字體粗細和形狀，可以根據讀者不斷變化的習慣進行縮放。

5.寬度和對齊方式：

別針

在數字文本格式中，段落寬度定義為字符數和行間距。 當人眼開始閱讀一段文字時，它會閱讀大約七到八個字母。 此外，人眼只能管理閱讀一些連續出現的重複。 因此，寫作任何部分的換行都是必不可少的。 您必須考慮閱讀一段文本時讀者的注意力如何移動。 它從文本行的結尾到下一行的開頭。 因此，根據文本類型維護一定數量的字符是必不可少的。 通常，一個段落包含一行包含 60 到 70 個字符的行。 當您使用 CSS 分配段落的寬度時，“ch”單位用於設置此值。 CSS 中的以下代碼定義了“ch”值：

磷

{

寬度：60ch；

最大寬度：100%；

}

當我們處理段落時，文本對齊也是至關重要的。 當瀏覽器更改時，有關斷字的幫助不是最佳的。 因此，應提前做好檢查。 如果連字幫助不可用，您應該避免證明文本的合理性，因為水平空間會成為您閱讀時的障礙。 當斷字支持可用和不可用時，我們會為您提供 CSS 代碼：

/* 在連字符可用的情況下：*/

p[lang=”en”]

{

文本對齊：對齊；

連字符：自動；

}

/*不支持連字符時的 CSS 代碼*/

p[語言=“它”]

{

文本對齊：左；

連字符：無；

}

不附帶本機支持的語言可以手動斷字。 您可以使用各種服務器端和客戶端來注入“‐” 因素。 這指示它可以在哪裡破壞令牌。 這個字符是不可見的，除非它被放置在行尾，它以連字符的形式顯示。 要使用它，我們需要設置“連字符：手動 CSS”參數。

6、前景對比：

別針

在易讀性方面要考慮的最基本因素是背景和字體所選顏色之間的顏色對比。 WCAG，也稱為 Web 內容可訪問性指南，具有針對各種標準的預定義指南的特定列表。 它定義了背景和 Web 應用程序或網站上的文本之間所需的正確顏色對比度。 您可以使用可用於設計和開發的各種工具來計算對比度。 市場上有自動驗證器，但它們的工作不如真正的測試準確。

當我們使用 CSS 定義顏色對比度時，我們可以使用“calc”語句動態計算字體顏色以提供最佳顏色對比度。 這是在考慮主題和背景的顏色時計算的。 使用“Calc”因子的 CSS 代碼如下：

文章

{

——紅色：230；

–綠色：230；

–藍色：230；

–aa-亮度：（

(var(–red) * 299) +

(var(-green) * 587) +

(var(–blue) * 114)

) / 1000;

--aa-color: calc((var(-aa-brightness) - 128) * -1000);

背景：rgb(var(–red), var(–green), var(–blue));

顏色：rgb(var(-aa-color)、var(-aa-color)、var(-aa-color))；

}

根據媒體查詢參數，還可以讓用戶根據自己的喜好在明暗主題之間切換。 您可以在 CSS 中使用“prefer-color-scheme”來啟用淺色和深色主題之間的切換，如下所示：

@media（喜歡顏色方案：深色）

{

文章

{

——紅色：30；

–綠色：30；

–藍色：30；

}

}

7. 給字體添加陰影：

別針

雖然我們在 Web 字體之間有很大的差異可供選擇，但很容易繞開選擇定義標準方法和一致性的傳統字體。 但是，選擇自定義 Web 字體有一些缺點。 例如，所有設備都以不同的方式呈現字體。 眾所周知，Apple 計算機使用抗鋸齒技術製作像素完美的字體。 但是，對於 Windows，他們更傾向於將易讀性放在首位的方法。 因此，如果您在基於 Apple 和 Windows 的設備上查看相同的文本，則字體可能會在一定程度上有所不同。

為了克服這個問題，網絡字體來拯救。 Web 字體在 Web 上的呈現效果與它們最初出現時一樣。 但是，對於新推出的自定義 Web 字體，字體不會按照我們的預期呈現。 因此，它們在各種設備上看起來不同。 有時，字體在更改瀏覽器時也會略有不同。 在這種情況下，您應該對字體應用陰影。 使用以下 CSS 代碼，您可以對字體實現陰影：

h1 { /* 你的選擇器 */

font-family：“一些自定義字體”，襯線；

文字陰影：0 0 1px 透明；

/* 或者，如果您需要應用 0px 硬陰影，

* 你可以使用多個文本陰影 */

文字陰影：0 0 0 #f00, 0 0 1px 透明；

}

結論：

閱讀是一項充滿複雜性的活動，當閱讀者有閱讀障礙時，它會變得更加複雜。 當您以網站開發為目標時，您必須照顧普通讀者，包括殘疾讀者。 因此，本博客討論了在考慮網站易讀性的同時使用 CSS 處理的基本問題。