在定製您的網站時，字型顏色經常被忽視。在大多數情況下，網站所有者會保留預設字型顏色，如黑色或他們為正文和標題文字顏色定義的任何主題樣式。
但是，出於多種原因，可能需要更改網站上的HTML字型顏色。更改HTML字型顏色可能看起來令人生畏，但它非常簡單。有多種方法可以更改您網站上的字型顏色。
在這篇文章中，我們將向您展示更改網站字型顏色的不同方法，並首先討論您為什麼要這樣做。
為什麼要更改HTML字型顏色？
您可能希望更改字型顏色，因為這樣做有助於提高您網站的可讀性和可訪問性。例如，如果您的網站使用較深的配色方案，將字型顏色保留為黑色會使您網站上的文字難以閱讀。
您要考慮更改字型顏色的另一個原因是，如果您要使用品牌調色盤中的較深顏色。這是強化品牌的又一個機會。它建立了品牌一致性並確保您所有營銷渠道中的文字看起來都相同。
順便說一下，讓我們看看如何定義和更改HTML字型顏色。
定義顏色的方法
在網頁設計中有多種定義顏色的方法，包括名稱、RGB 值、十六進位制程式碼和HSL值。讓我們來看看它們是如何工作的。
顏色名稱
顏色名稱是在CSS樣式中定義顏色的最簡單方法。顏色名稱是指HTML顏色的特定名稱。目前，支援140種顏色名稱，您可以在樣式中使用這些顏色中的任何一種。例如，您可以使用“blue”將單個元素的顏色設定為藍色。
HTML顏色名稱
但是，這種方法的缺點是並非所有顏色名稱都受支援。換句話說，如果您使用的顏色不在支援的顏色列表中，您將無法通過顏色名稱在您的設計中使用它。
RGB和RGBA值
接下來，我們有RGB和RGBA值。RGB代表紅色、綠色和藍色。它通過混合紅色、綠色和藍色值來定義顏色，類似於在實際調色盤上混合顏色的方式。
RGB值
RGB值如下所示：RGB(153,0,255)。第一個數字指定紅色輸入，第二個指定綠色輸入，第三個指定藍色。
每種顏色輸入的值範圍在0到255之間，其中0表示根本不存在顏色，而255表示特定顏色處於其最大強度。
RGBA值在混合中再增加一個值，即表示不透明度的alpha值。它的範圍從0（不透明）到1（完全透明）。
十六進位制值
HEX程式碼是另一個易於使用的顏色選擇選項。
十六進位制顏色程式碼的工作方式類似於RGB程式碼。它們由0到9的數字和A到F的字母組成。十六進位制程式碼如下所示：#800080。前兩個字母指定紅色的強度，中間的兩個數字指定綠色的強度，最後兩個數字設定藍色的強度。
HSL和HSLA值
在HTML中定義顏色的另一種方法是使用HSL值。HSL代表色調、飽和度和亮度。
HSL顏色值
色調使用從0到360的度數。在標準色輪上，紅色約為0/360，綠色約為120，藍色約為240。
飽和度使用百分比來定義顏色的飽和度。0代表黑白，100代表全綵。
最後，亮度使用與飽和度類似的百分比。在這種情況下，0%代表黑色，100%代表白色。
例如，我們一直在使用整個本文紫色看起來像這樣在HSL： hsl(276, 100%, 50%)。
HSL與RGB一樣，支援不透明度。在這種情況下，你會使用其中A代表字母和一個數字定義為從0到1，如果我們想降低例如紫色的不透明度值HSLA，我們會使用此程式碼：hsl(276, 100%, 50%, .85)。
既然您知道如何定義顏色，讓我們看看更改HTML字型顏色的不同方法。
舊的：<font>標籤
在HTML5被引入並設定為編碼標準之前，您可以使用字型標籤更改字型顏色。更具體地說，您將使用帶有顏色屬性的字型標記來設定文字顏色。color要麼用其名稱或與它的十六進位制程式碼指定。
這是此程式碼如何使用十六進位制顏色程式碼的示例：
<font color="#800080">This text is purple.</font>
這就是如何使用顏色名稱將文字顏色設定為紫色。
<font color="purple">This text is purple.</font>
但是，<font>標籤在HTML5中已棄用，不再使用。改變字型顏色是一個設計決定，設計不是HTML的主要目的。因此，HTML5不再支援<font>這些標籤是有道理的。
那麼如果不再支援 <font>標籤，你如何更改HTML字型顏色？答案是使用CSS層疊樣式表。
新的：CSS樣式
要使用CSS更改HTML字型顏色，您將使用與相應選擇器配對的CSS顏色屬性。CSS允許您使用顏色名稱、RGB、十六進位制和HSL值來指定顏色。可以通過三種方式使用CSS更改字型顏色。
內聯CSS
內聯CSS直接新增到您的HTML檔案中。您將使用諸如<p>之類的HTML標記，然後使用CSS顏色屬性對其進行樣式設定，如下所示：
<p style="color: purple">This is a purple paragraph.</p>
如果您想使用十六進位制值，您的程式碼將如下所示：
<p style="color:#800080">This is a purple paragraph.</p>
如果你打算使用RGB值，你會這樣寫：
<p style="color:RGB(153,0,255)">This is a purple paragraph.</p>
最後，使用HSL值，您將使用以下程式碼：
<p style="color:hsl(276, 100%, 50%)">This is a purple paragraph.</p>
上面的示例向您展示瞭如何更改網站上段落的顏色。但是您不僅限於段落。您可以更改標題和連結的字型顏色。
例如，將<p>上面的標籤替換為<h2>將更改該標題文字的顏色，而將其替換為<a>標籤將更改該連結的顏色。您還可以使用<span>元素為任意數量的文字著色。
如果要更改整個段落或標題的背景顏色，這與更改字型顏色的方式非常相似。您必須改用該background-color屬性並使用顏色名稱、十六進位制、RGB或HSL值來設定顏色。下面是一個例子：
<code class="language-html"><p style="background-color: purple">
嵌入式 CSS
嵌入式CSS位於<style>標籤內，並位於HTML文件的head標籤之間。
如果要使用顏色名稱，程式碼將如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>
上面的程式碼會將頁面上每個段落的顏色更改為紫色。與內聯CSS方法類似，您可以使用不同的選擇器來更改標題和連結的字型顏色。
如果要使用十六進位制程式碼，程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: #800080;
}
</style>
</head>
下面的示例使用RBGA值，因此您可以看到設定不透明度的示例：
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: RGB(153,0,255,0.75),
}
</style>
</head>
HSL程式碼如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>
外部CSS
最後，您可以使用外部CSS更改網站上的字型顏色。外部CSS是放置在單獨的樣式表檔案中的CSS，通常稱為style.css或stylesheet.css。
此樣式表負責您網站上的所有樣式，並指定字型顏色和字型大小、邊距、填充、字型系列、背景顏色等。簡而言之，樣式表負責您的網站在視覺上的外觀。
要使用外部CSS更改字型顏色，您需要使用選擇器來設定您想要的HTML部分的樣式。例如，此程式碼將更改您網站上的所有正文：
body {color: purple;}
請記住，您可以使用RGB、十六進位制和HSL值而不僅僅是顏色名稱來更改字型顏色。如果要編輯樣式表，建議在程式碼編輯器中進行。
內聯、嵌入式還是外部？
所以現在您知道如何使用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查詢顏色程式碼。
如果您在網站上看到您喜歡的顏色，您可以檢查程式碼以獲取顏色的十六進位制、RGB或HSL值。在Chrome中，您所要做的就是將游標指向要檢查的網頁部分，右鍵單擊並選擇Inspect。這將開啟程式碼檢查面板，您可以在其中檢視網站的HTML程式碼和相應的樣式。
小結
更改HTML字型顏色有助於提高網站的可讀性和可訪問性。它還可以幫助您在網站樣式中建立品牌一致性。
在本指南中，您瞭解了更改HTML字型顏色的四種不同方法：使用顏色名稱、十六進位制程式碼、RGB和HSL值。
我們還介紹瞭如何使用內嵌、嵌入和外部CSS更改字型顏色，以及如何使用字型標籤以及每種方法的優缺點。到現在為止，您應該很好地瞭解應該使用哪種方法來更改HTML字型顏色，因此現在唯一要做的就是在您的站點上實施這些提示。
評論留言