HTML - 字型

HTML 字型在使網站更使用者友好並提高內容可讀性方面起著重要作用。字型和顏色完全取決於用於檢視頁面的計算機和瀏覽器，但您可以使用 HTML  標籤向網站上的文字新增樣式、大小和顏色。您還可以使用 <basefont> 標籤將所有文字設定為相同的大小、字型和顏色。

HTML 標籤

HTML  標籤指定要在網頁上顯示的文字的大小、顏色和字型（族）。

 標籤具有三個屬性，稱為size、color和face，用於自定義字型。要在網頁中的任何時間更改任何字型屬性，只需使用帶有屬性名稱和值的 標籤即可。後面的文字將保持更改，直到您使用 標籤關閉為止。您可以在一個 標籤中更改一個或所有字型屬性。

font 和 basefont 標籤已棄用，它們應該在 HTML 的未來版本中刪除。因此，不應使用它們；建議使用 CSS 樣式來操作字型。但是，出於學習目的，本章將詳細解釋 font 和 basefont 標籤。

設定字型大小

要設定網頁的字型大小，我們使用 size 屬性。此屬性允許我們將字型大小設定為 1 到 7 之間，其中 1 是最小字型大小，而 7 是最大字型大小。字型的預設大小為 3。

示例

以下示例顯示如何使用 標籤的“size”屬性來設定字型大小

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

相對字型大小

在 HTML 中，相對字型大小表示指定比預設字型大小大或小多少個大小。我們可以像  或  一樣指定它

示例

下面的程式碼演示瞭如何在網頁中設定文字的相對字型大小

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

設定字型

您可以使用face屬性設定字型（族），但請注意，如果檢視頁面的使用者沒有安裝該字型，他們將無法看到它。相反，使用者將看到適用於使用者計算機的預設字型。

示例

在此示例中，我們透過使用“face”屬性將多個字型設定為文字

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

指定備用字型

只有當訪問者在其計算機上安裝了該字型時，他們才能看到您的字型。因此，我們可以透過列出字型名稱（用逗號分隔）來指定兩個或多個字型替代方案。

<font face = "arial, helvetica">
<font face = "Lucida Calligraphy, Comic Sans MS, Lucida Console">

載入頁面時，他們的瀏覽器將顯示第一個可用的字型。如果未安裝任何給定的字型，則它將顯示預設字型Times New Roman。

設定字型顏色

我們可以使用 color 屬性將我們選擇的任何字型顏色設定為文字。要指定顏色，我們可以使用顏色名稱或該顏色的十六進位制程式碼。

注意 - 您可以檢視 帶程式碼的 HTML 顏色名稱 的完整列表。

示例

以下示例說明如何將顏色設定為網頁上的文字

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

<basefont> 元素

<basefont> 元素用於為文件中未包含在 標籤中的任何部分設定預設字型大小、顏色和字型。您可以使用 元素覆蓋 <basefont> 設定。

與 標籤一樣，<basefont> 標籤也採用 color、size 和 face 屬性，它將透過將 size 的值設定為 +1（更大）或 −2（更小兩個大小）來支援相對字型設定。

示例

在下面的 HTML 程式碼中，我們正在說明“basefont”標籤的使用

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

上面的 HTML 程式碼將生成四行文字，具有不同的字型、顏色和大小。

在 HTML 中使用 Web 安全字型

CSS3 已採用字型組合技術。如果瀏覽器不支援第一個字型，則它會嘗試下一個字型。以下是CSS Web 安全字型。 的列表。

HTML 字型參考

要了解更多關於 HTML 字型的知識，請訪問： HTML 字型參考

列印頁面