如何更改 HTML 字體顏色

在定製您的網站時,字體顏色經常被忽視。在大多數情況下,網站所有者會保留默認字體顏色,如黑色或他們為正文和標題文本顏色定義的任何主題樣式。

嘗試免費演示

但是,出於多種原因,最好更改網站上的 HTML 字體顏色。更改 HTML 字體顏色可能看起來令人生畏,但它非常簡單。有多種方法可以更改您網站上的字體顏色。

在這篇文章中,我們將向您展示更改網站字體顏色的不同方法,並首先討論您為什麼要這樣做。

為什麼要更改 HTML 字體顏色?

您可能希望更改字體顏色,因為這樣做有助於提高您網站的可讀性和可訪問性。例如,如果您的網站使用較深的配色方案,將字體顏色保留為黑色會使您網站上的文本難以閱讀。

您要考慮更改字體顏色的另一個原因是,如果您要使用品牌調色板中的較深顏色。這是強化品牌的又一個機會。它建立了品牌一致性並確保您所有營銷渠道中的文本看起來都相同。

順便說一下,讓我們看看如何定義和更改 HTML 字體顏色。

但這是一個簡單的編輯,可以添加很多個性!✨🎨點擊推文

定義顏色的方法

在網頁設計中有多種定義顏色的方法,包括名稱、RGB 值、十六進位代碼和 HSL 值。讓我們來看看它們是如何工作的。

顏色名稱

顏色名稱是在 CSS 樣式中定義顏色的最簡單方法。顏色名稱是指 HTML 顏色的特定名稱。目前,支持 140 種顏色名稱,您可以在樣式中使用這些顏色中的任何一種。例如,您可以使用「blue」將單個元素的顏色設置為藍色。

HTML 顏色名稱HTML 顏色名稱。

但是,這種方法的缺點是並非所有顏色名稱都受支持。換句話說,如果您使用的顏色不在支持的顏色列表中,您將無法通過顏色名稱在您的設計中使用它。

RGB 和 RGBA 值

接下來,我們有 RGB 和 RGBA 值。RGB 代表紅色、綠色和藍色。它通過混合紅色、綠色和藍色值來定義顏色,類似於在實際調色板上混合顏色的方式。

RGB 值RGB 值。

RGB 值如下所示:RGB(153,0,255)。第一個數字指定紅色輸入,第二個指定綠色輸入,第三個指定藍色。

每種顏色輸入的值範圍在 0 到 255 之間,其中 0 表示根本不存在顏色,而 255 表示特定顏色處於其最大強度。

RGBA 值在混合中再增加一個值,即表示不透明度的 alpha 值。它的範圍從 0(不透明)到 1(完全透明)。

十六進位值

HEX 代碼是另一個易於使用的顏色選擇選項。HEX 代碼是另一個易於使用的顏色選擇選項。

十六進位顏色代碼的工作方式類似於 RGB 代碼。它們由 0 到 9 的數字和 A 到 F 的字母組成。十六進位代碼如下所示:#800080。前兩個字母指定紅色的強度,中間的兩個數字指定綠色的強度,最後兩個數字設置藍色的強度。

HSL 和 HSLA 值

在 HTML 中定義顏色的另一種方法是使用 HSL 值。HSL 代表色調、飽和度和亮度。

HSL 顏色值 HSL 顏色值。

色調使用從 0 到 360 的度數。在標準色輪上,紅色約為 0/360,綠色約為 120,藍色約為 240。

飽和度使用百分比來定義顏色的飽和度。0代表黑白,100代表全彩。

最後,亮度使用與飽和度類似的百分比。在這種情況下,0% 代表黑色,100% 代表白色。

例如,我們在本文中一直使用的紫色在 HSL 中看起來像這樣:hsl(276, 100%, 50%)。

HSL 與 RGB 一樣,支持不透明度。在這種情況下,您將使用 HSLA 值,其中 A 代表 alpha 並定義為從 0 到 1 的數字。如果我們想降低紫色示例的不透明度,我們將使用以下代碼:hsl(276, 100%、50%、0.85)。

既然您知道如何定義顏色,讓我們看看更改 HTML 字體顏色的不同方法。

舊的:<font> 標籤

在 HTML5 被引入並設置為編碼標準之前,您可以使用字體標籤更改字體顏色。更具體地說,您將使用帶有顏色屬性的字體標記來設置文本顏色。顏色是用它的名字或它的十六進位代碼指定的。

這是此代碼如何使用十六進位顏色代碼的示例:

<font color=”#800080″>此文字為紫色。</font>

這就是如何使用顏色名稱將文本顏色設置為紫色。

<font color=”purple”>這個文字是紫色的。</font>

但是,<font> 標記在 HTML5 中已棄用,不再使用。改變字體顏色是一個設計決定,設計不是 HTML 的主要目的。因此,HTML5 不再支持 <font> 標籤是有道理的。

那麼如果不再支持 <font> 標籤,你如何更改 HTML 字體顏色?答案是使用級聯樣式表或 CSS。

新:CSS 樣式

To change the HTML font color with CSS, you’ll use the CSS color property paired with the appropriate selector. CSS 允許您使用顏色名稱、RGB、十六進位和 HSL 值來指定顏色。可以通過三種方式使用 CSS 更改字體顏色。

內聯 CSS

內聯 CSS 直接添加到您的 HTML 文件中。您將使用諸如 <p> 之類的 HTML 標記,然後使用 CSS 顏色屬性對其進行樣式設置,如下所示:

<p style=”color: Purple”>這是一個紫色的段落。</p>

如果您想使用十六進位值,您的代碼將如下所示:

<p style=”color:#800080″>這是一個紫色的段落。</p>

如果你打算使用 RGB 值,你會這樣寫:

<p style=”color:RGB(153,0,255)”>這是一個紫色的段落。</p>

最後,使用 HSL 值,您將使用以下代碼:

<p style=”color:hsl(276, 100%, 50%)”>這是一個紫色的段落。</p>

上面的示例向您展示了如何更改網站上段落的顏色。但是您不僅限於段落。您可以更改標題和鏈接的字體顏色。

例如,將上面的 <p> 標記替換為 <h2> 將更改該標題文本的顏色,而將其替換為 <a> 標記將更改該鏈接的顏色。您還可以使用 <span> 元素為任意數量的文本著色。

訂閱時事通訊

想知道我們是如何將流量增加超過 1000% 的嗎?

加入 20,000 多名其他人的行列,他們會收到我們的每周時事通訊,其中包含 WordPress 內幕技巧!

現在訂閱

如果要更改整個段落或標題的背景顏色,這與更改字體顏色的方式非常相似。您必須改用 background-color 屬性並使用顏色名稱、十六進位、RGB 或 HSL 值來設置顏色。下面是一個例子:  

<p style=”background-color: Purple”>

嵌入式 CSS

嵌入式 CSS 位於 <style> 標籤內,並位於 HTML 文檔的 head 標籤之間。

如果要使用顏色名稱,代碼將如下所示:

<!DOCTYPE html>
<html>
<head>
<style>
<p> {
顏色:紫色;
}
</style>
</head>

上面的代碼會將頁面上每個段落的顏色更改為紫色。與內聯 CSS 方法類似,您可以使用不同的選擇器來更改標題和鏈接的字體顏色。

如果要使用十六進位代碼,代碼如下所示:

<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>

下面的示例使用 RBGA 值,因此您可以看到設置不透明度的示例:

<!DOCTYPE html>

<html>

<頭>

<樣式>

<p> {

顏色:RGB(153,0,255,0.75),

}

</style>

</頭>

HSL 代碼如下所示:

<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>

外部 CSS

最後,您可以使用外部 CSS 更改網站上的字體顏色。外部 CSS 是放置在單獨的樣式表文件中的 CSS,通常稱為 style.css 或 stylesheet.css。

此樣式表負責您網站上的所有樣式,並指定字體顏色和字體大小、邊距、填充、字體系列、背景顏色等。簡而言之,樣式表負責您的網站在視覺上的外觀。

要使用外部 CSS 更改字體顏色,您需要使用選擇器來設置您想要的 HTML 部分的樣式。例如,此代碼將更改您網站上的所有正文:

身體{顏色:紫色;}

請記住,您可以使用 RGB、十六進位和 HSL 值而不僅僅是顏色名稱來更改字體顏色。如果要編輯樣式表,建議在代碼編輯器中進行。

需要為您的 WordPress 網站提供快速、可靠且完全安全的託管服務?Kinsta 提供所有這些以及來自 WordPress 專家的 24/7 世界級支持。查看我們的計劃。

內聯、嵌入式還是外部?

所以現在您知道如何使用 CSS 來更改字體顏色了。但是您應該使用哪種方法?

如果您使用內聯 CSS 代碼,您將直接將其添加到您的 HTML 文件中。一般來說,這種方法適用於快速修復。如果您想更改單個頁面上特定段落或標題的顏色,此方法是最快且最簡單的方法。

但是,內聯樣式會使 HTML 文件的大小變大。HTML 文件越大,載入網頁所需的時間就越長。除此之外,內聯 CSS 會使您的 HTML 變得混亂。因此,通常不鼓勵使用 CSS 更改 HTML 字體顏色的內聯方法。

嵌入式 CSS 位於 <head> 標籤之間和 <style> 標籤內。與內聯 CSS 一樣,它適用於快速修復和覆蓋外部樣式表中指定的樣式。

內嵌樣式和嵌入樣式之間的一個顯著區別是它們將應用於載入 head 標籤的任何頁面,而內嵌樣式僅應用於它們所在的特定頁面,通常是它們在該頁面上定位的元素。

最後一種方法是外部 CSS,它使用專用的樣式表來定義您的視覺樣式。一般來說,最好使用外部樣式表將所有樣式保存在一個地方,以便於編輯。這也將呈現和設計分開,因此代碼易於管理和維護。

請記住,內聯和嵌入樣式可以覆蓋在外部樣式表中設置的樣式。

字體標籤或 CSS 樣式:優點和缺點

更改 HTML 字體顏色的兩種主要方法是使用字體標記或 CSS 樣式。這兩種方法各有優缺點。

HTML 字體標籤的優點和缺點

HTML 字體標籤易於使用,因此對它有利。一般來說,CSS 比輸入 <font color=”purple”> 更複雜,學習時間也更長。如果您有一個不使用 HTML5 的舊網站,那麼字體標籤是一種更改字體顏色的可行方法。

儘管字體標籤易於使用,但如果您的網站使用 HTML,則不應使用它。如前所述,字體標籤在 HTML5 中已被棄用。應避免使用已棄用的代碼,因為瀏覽器可能隨時停止支持它。這可能會導致您的網站崩潰並且無法正常運行,或者更糟糕的是,根本無法向訪問者顯示。

CSS 優缺點

CSS 與字體標籤一樣,也有其優點和缺點。使用 CSS 的最大優勢是它是更改字體顏色和為您的網站指定所有其他樣式的正確方法。

如前所述,它將表示與設計分開,使您的代碼更易於管理和維護。

不利的一面是,與舊的代碼編寫方式相比,CSS 和 HTML5 需要時間來學習和正確編寫。

請記住,使用 CSS,您可以使用不同的方法來更改字體顏色,並且如前所述,每種方法都有自己的優缺點。

更改 HTML 字體顏色的提示

既然您知道如何更改 HTML 字體顏色,這裡有一些技巧可以幫助您。

使用顏色選擇器

顏色選擇器簡化了顏色選擇過程。顏色選擇器簡化了顏色選擇過程。

不要隨意選擇顏色,而是使用顏色選擇器來選擇正確的顏色。顏色選擇器的好處是它會為您提供顏色名稱以及您需要在代碼中使用的正確的十六進位、RGB 和 HSL 值。

檢查對比度

使用對比度檢查器測試各種文本與背景顏色的對比度。使用對比度檢查器測試各種文本與背景顏色的對比度。

深色背景的深色文本和淺色背景的淺色文本不能很好地搭配使用。它們會使您網站上的文本難以閱讀。但是,您可以使用對比度檢查器來確保您網站的顏色易於訪問且文本易於閱讀。

使用 Inspect 方法查找顏色

使用 Inspect 查找顏色代碼。使用 Inspect 查找顏色代碼。

如果您在網站上看到您喜歡的顏色,您可以檢查代碼以獲取顏色的十六進位、RGB 或 HSL 值。在 Chrome 中,您只需將游標指向要檢查的網頁部分,右鍵單擊並選擇「檢查」。這將打開代碼檢查面板,您可以在其中查看網站的 HTML 代碼和相應的樣式。

想要更改您網站上的字體顏色?🎨 很簡單!本指南將幫助您入門 ⬇️Click to Tweet

概括

更改 HTML 字體顏色有助於提高網站的可讀性和可訪問性。它還可以幫助您在網站樣式中建立品牌一致性。

在本指南中,您了解了更改 HTML 字體顏色的四種不同方法:使用顏色名稱、十六進位代碼、RGB 和 HSL 值。

我們還介紹了如何使用內嵌、嵌入和外部 CSS 更改字體顏色,以及如何使用字體標籤以及每種方法的優缺點。到現在為止,您應該很好地了解應該使用哪種方法來更改 HTML 字體顏色,因此現在唯一要做的就是在您的站點上實施這些提示。

您對使用 CSS 和字體標籤更改字體顏色有何想法?請在評價部分留下您的意見!

通過以下方式節省時間、成本並最大限度地提高站點性能:

  • 來自 WordPress 託管專家的即時幫助,24/7。
  • Cloudflare 企業集成。
  • 全球受眾覆蓋全球 29 個數據中心。
  • 使用我們內置的應用程序性能監控進行優化。

所有這些以及更多,都在一個沒有長期合同、協助遷移和 30 天退款保證的計劃中。查看我們的計劃或與銷售人員交談以找到適合您的計劃。

相關文章