在 CSS 中自定義網站文本的 17 種方法（包括示例）

如果您曾經問過自己“如何更改 CSS 中的文本？”，那麼這篇文章適合您。 在下文中，我們將介紹使用 CSS 標記在網站上自定義文本的多種方法。

為什麼這很重要？

因為排版是網頁設計的重要組成部分。 就像使用自定義字體一樣，在您的網站上設置文本樣式以確保它適合您品牌的其餘部分的能力至關重要。

值得慶幸的是，CSS 提供了很多樣式選項來幫助解決這個問題。 在這篇文章中，我們將介紹所有最重要的和一些鮮為人知的。

通過 CSS 設置文本樣式的 17 種不同方法

以下是通過 CSS 屬性自定義網頁文本的不同方法。 您可以使用瀏覽器開發工具輕鬆嘗試所有這些。 沒錯，您甚至不必擁有自己的網站，您可以在任何有文字的網頁上試用。

1.字體系列

我們首先要討論的是font-family屬性。 這決定了您的文本將使用哪種字體。

它很容易使用。 以下是上述示例的隨附代碼。

 #div-one { font-family: Arial; } #div-two { font-family: Courier; } #div-three { font-family: Impact; }

您只需使用 CSS 選擇器確定要更改字體的元素，添加font-family屬性，並將字體名稱作為值包含在內。

值可以是字體系列名稱，如Arial和"Open Sans" ，也可以是通用字體聲明，如serif或monospace 。 如果您使用後者，瀏覽器將使用最接近的近似值。

如果值包含空格，例如“ Times New Roman" ，則需要使用雙引號，如果不包含空格，例如Tahoma或sans-serif ，則可以省略它們。

創建字體堆棧

在網頁設計中，您通常通過給出一個用逗號分隔的字體列表（所謂的字體堆棧）來包含備用字體。

 #div { font-family: "Open Sans", Arial, sans-serif; }

這些是在瀏覽器沒有可用的原始字體的情況下（例如，因為它沒有安裝在用戶計算機上或在網站上丟失）。 然後它移動到列表中的第二個，依此類推，直到找到可以使用的一個。

這樣，即使訪問者無法使用您想要的字體，您也可以確保您的網站看起來仍然最像您最初的想法。

為此，最後兩個備用字體通常是最有可能在任何計算機上可用的網絡安全字體，然後是一個通用聲明，例如serif或sans-serif 。 您可以在此處找到網絡安全字體及其兼容性。

另一種常見的做法是在樣式表的開頭定義默認字體，方法是將它們分配給body選擇器和所有標題，然後為下面的特定元素使用其他字體系列。

 body { font-family: Garamond, "Times New Roman", serif; } h1, h2, h3, h4, h5, h6 { font-family: "Roboto", "Helvetica Neue", sans-serif; } .page-title { font-family: Garamond, serif; }

2.字體大小

很明顯，使用這個 CSS 屬性，您可以自定義文本的大小。

您有兩個選擇：設置絕對大小（例如在px中）或相對（在em 、 rem或類似中）。

 #div-one { font-size: 20px; } #div-two { font-size: 8em; } #div-three { font-size: 5rem; }

後者現在更常見，因為它對響應式設計和可訪問性更有用。

使用em時， 1em等於16px （這是瀏覽器默認字體大小）。 您可以從那裡計算其他字體大小，只需將您想要的像素值除以 16 即可得出em值。 例如，這兩個字體大小聲明將輸出相同的大小：

 #div-one { font-size: 32px; } #div-two { font-size: 2em; }

有時使用em和rem會涉及到更多的數學問題，您可以在此處閱讀更多相關信息。

3.字體粗細

使用font-weight來控製字體的粗細。

有幾種方法可以做到這一點。 要么使用預先存在的字體粗細指定之一（ thin 、 light 、 normal 、 bold 、 extra-bold等），要么輸入粗體值編號（對於可變字體，在1到1000之間，步長為 100 到 100 到100之間） 900用於非可變字體）。

 #div-one { font-weight: light; } #div-two { font-weight: 800; } #div-three { font-weight: bolder; }

您還可以使用lighter和bolder的表示您希望與父元素相比將權重增加/減少一步。 但是，這種情況非常罕見。

請注意，為了使用特定的字體粗細，它需要出現在您的站點或用戶的機器上（並且以所選字體開頭）。 這就是為什麼在安裝自定義字體時，您可以選擇要包含的字體粗細。

如果沒有加載權重，瀏覽器將無法使用它。

4.字體樣式

在幾乎所有情況下，此 CSS 屬性都用於將字體設置為斜體。 它只需要三個值： normal （默認）、 italic和oblique 。

oblique與italic幾乎相同，但通過傾斜原始字體來模擬斜體字體。 此外，瀏覽器支持更差。 以下是如何使用font-style ：

 #div-one { font-style: normal; } #div-two { font-style: italic; } #div-three { font-style: oblique; }

5.字體變體

font-variant只有一個用途：讓字體出現在小型大寫字母中，這意味著將小寫字母轉換為較小的大寫字母。 聽起來不清楚？ 這就是我的意思：

不要問我這個用例，那可能來自互聯網的遠古時代。 如果您想嘗試一下，請按以下步驟操作：

 #div { font-variant: small-caps; }

6.字體

這是一個簡寫屬性，可用於在一個聲明中聲明font-style 、 font-variant 、 font-weight 、 font-size 、 line-height和font-family 。

 #div { font: italic small-caps 300 40px/200px Impact; }

下面是如何使用它的語法（注意font-size和line-height之間的斜線，如果你想聲明兩者，這是強制性的）：

 font: font-style font-variant font-weight font-size/line-height font-family;

只有font-size和font-family是必需的，如果沒有聲明，其餘的將回退到默認值。

您還可以使用其他一些值，例如caption 、 icon和small-caption 。 更多關於這裡。

7. 顏色

color屬性決定了，你猜對了，字體顏色和僅字體顏色（包括任何text-decoration元素）。 許多初學者（包括我）可能認為它還應該確定整個元素的顏色，但為此您必須查看background-color （因為從技術上講， color為前景著色）。

使用color很簡單：

 #div-one { color: #f2db3f; } #div-two { color: #1bf20f; } #div-three { color: #412535; }

您可以通過幾種不同的方式定義文本的顏色：

• 使用red 、 pink 、 blue等顏色名稱，也可以papayawhip或navajowhite （有大量預定義的 HTML 顏色可供選擇）。
• 作為十六進制值，例如#ff0000 。
• RGB 顏色值，例如rgb(255, 0, 0); .

有關更多信息，請查看我們關於如何在 CSS 中定義顏色的廣泛教程。

8. 背景色

如果你想更進一步，你也可以使用background-color 。 如上所述，這是控製文本背景顏色的屬性。 它通常與color結合使用，以確保文本具有足夠的對比度以保持清晰易讀。 您可以使用此工具來確保這是真的。

這也是可訪問性的一個重要因素。 以下是如何在 CSS 中實現上述目標：

 #div { color: #f2db3f; } #div p { background-color: #000; }

9. 文本轉換

通過 CSS 在您的網站上自定義文本的另一種方法是使用text-transform 。 它只有三個用例：使文本全部大寫、全部小寫或將每個單詞的首字母大寫。

使用起來也非常簡單：

 #div-one { text-transform: uppercase; } #div-two { text-transform: lowercase; } #div-three { text-transform: capitalize; }

text-transform還有另一個值，即full-width 。 它將所有字母轉換為放置在固定寬度的正方形內。 這通常僅在使用日語或韓語等亞洲語言的字形時才相關，尤其是與拉丁字母組合時。

10. 文字裝飾

這實際上是四個不同屬性的簡寫： text-decoration-line 、 text-decoration-color 、 text-decoration-style和text-decoration-thickness 。

但是，在大多數情況下，您只需單獨使用text-decoration 。 不同的屬性採用什麼樣的值，它們的作用是什麼？

• text-decoration-line — 您可以使用overline 、 line-through 、 underline和none在文本上方、下方或通過文本創建線條。 none最常用於刪除鏈接的標準下劃線。 您還可以組合使用多個值。
• text-decoration-color — 控制線條的顏色。 它採用通常的 CSS 顏色聲明。
• text-decoration-style — 改變裝飾的風格。 它可以是solid的、 double的、 dotted的、 dashed的、 wavy的和none的。
• text-decoration-thickness — 通過常用值設置線條的粗細，例如px 、 %和em 。 它還需要auto和from-font ，它們使用可能包含在所選字體中的任何值。

如何使用文本裝飾

您可以單獨使用它們，但如前所述，更常見的是使用速記代替。 這是它的語法：

 text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

只有text-decoration-line的值是必需的，其餘是可選的。 要實現上面示例圖像中看到的效果，您可以使用下面的代碼。

 #div-one { text-decoration: overline; } #div-two { text-decoration: line-through; } #div-three { text-decoration: underline dotted; } #div-four { text-decoration: line-through black 10px; } #div-five { text-decoration: underline wavy 0.1em; } #div-six { text-decoration: none; }

快速提示：使用text-decoration為鏈接等文本添加下劃線的一種常見替代方法是使用border屬性。 它提供的好處是您可以控制線條與文本之間的距離，還可以使線條延伸到文本之外。 兩者都不能使用text-decoration 。

11.文字陰影

如果您已閱讀我們關於 CSS 框陰影的教程，那麼text-shadow應該不會對您造成大問題。 基本上，您可以使用它為文本提供陰影，包括控制其方向、顏色和模糊。

 #div-one { text-shadow: -5px 4px black; } #div-two { text-shadow: 0 0 20px #fff; } #div-three { text-shadow: -10px -10px rgba(0, 0, 0, 0.4), -20px -20px rgba(0, 0, 0, 0.3), -30px -30px rgba(0, 0, 0, 0.2), -40px -40px rgba(0, 0, 0, 0.1), -50px -50px rgba(0, 0, 0, 0.05); }

text-shadow最多有四個值：水平偏移量、垂直偏移量、 blur和color 。

 text-shadow: offset-x offset-y blur-radius color;

使用text-shadow時，前兩個是必需的，其他是可選的。 請注意，偏移量採用負值向左和向上移動陰影，向右和向下移動正值。

您可以通過在 CSS 中確定尺寸和顏色的常用方法來定義偏移量、 blur和color 。 除了color ，他們最常使用px 。

此外，就像box-shadow一樣，您也可以在一個聲明中為同一個元素設置多個陰影，只需用逗號分隔它們。

12. 文本對齊

使用 CSS 屬性text-align ，您可以自定義網站上文本的水平對齊方式。 它可以是left 、 right 、 center或justify （意味著單詞之間的空格會拉伸以使文本適合可用空間）。

這是上圖的隨附代碼：

 #div-one { text-align: left; } #div-two { text-align: right; } #div-three { text-align: center; } #div-four { text-align: justify; }

請注意，根據文本方向（從左到右或從右到左），默認對齊方式為左或右，無需通過 CSS 專門定義它，因為它會自動發生。

與text-align相關的屬性是：

• text-align-last — 與 text-align 相同，但只影響元素中的最後一行文本。
• direction / unicode-bidi — 允許您更改文本的方向（例如從右到左）。

13. - 16. 文本間距

您可以使用許多 CSS 屬性來更改網站文本中的間距。

線高

這可以改變文本行之間的間距。 它採用通常的 CSS 大小和長度單位，但最常見的是簡單地定義為沒有單位的乘數。

 div { line-height: 2; }

當你這樣做時，行高將只是字體大小和line-height值的乘積。

字間距

此屬性使您可以控制單個單詞之間的距離（我敢肯定，您永遠猜不到）。

從上圖中可以看出，它也需要負值來使距離更小。 除此之外，您可以將它與 CSS 中可用的大多數長度和大小單位聲明一起使用。

 div { word-spacing: 10px; }

字母間距

這個名字也已經給出了它，你可以用它來增加或減少字母之間的空間。

當然，後者是通過負值和letter-spacing發生的，它也採用通常的單位來聲明大小。

 div { letter-spacing: 12px; }

文本縮進

此 CSS 屬性使您能夠縮進應用它的元素中的第一行文本。

這是它在標記中的樣子：

 div p { text-indent: 25%; }

您可以使用通常的寬度和長度單位以及百分比。 負值還允許您將文本向左移動。

17. 通過 CSS 自定義文本的其他方法

除了我們已經介紹的內容之外，還有其他方法可以在 CSS 中定位文本。 為此，了解 HTML 類和 id、自定義屬性以及::first-letter或::first-word等偽元素是有意義的。 雖然這有點超出了本文的範圍，但請務必查看鏈接的教程。

還有更多的 CSS 屬性可以讓您處理文本並真正深入了解細節。 如果你想變得非常書呆子，你可能想研究一下word-break 、 hyphen或font-kerning之類的東西。

簡而言之，CSS 中的文本自定義

CSS 提供了許多方法來自定義您網站上的文本。 與自定義字體一起，它可以讓您的頁面副本看起來完全符合您的要求。

上面，我們已經介紹了最重要的 CSS 屬性，以便您進行徹底的更改。 雖然還有更多，但這些是您需要的核心。

你知道任何其他有用的 CSS 屬性可以用來自定義網站上的文本嗎？ 如果是這樣，請在評論中告訴我們！