極客書

HTML - Fonts

字體在提高網站用戶友好性和內容可讀性方面起著非常重要的作用。字體字體和顏色完全取決於用於查看頁面的計算機和瀏覽器，但您可以使用HTML<Font>標記爲網站上的文本添加樣式、大小和顏色。您可以使用<basefont>標記將所有文本設置爲相同的大小、面和顏色。

字體標記有三個屬性，稱爲大小、顏色和面，用於自定義字體。要隨時更改網頁中的任何字體屬性，只需使用<字體>標記。後面的文本將保持更改，直到您使用</font>標記關閉。可以在一個標記中更改一個或所有字體屬性。

注意−不推薦使用字體和基本字體標記，它應該在將來的HTML版本中刪除。所以不應該使用它們，而是建議使用CSS樣式來操作字體。但仍出於學習目的，本章將詳細解釋字體和基本字體標記。

Set Font Size

您可以使用size屬性設置內容字體大小。接受值的範圍是1（最小）到7（最大）。字體的默認大小是3。

Example

Live Demo 
<!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>

這將產生以下結果&負;

Relative Font Size

您可以指定比預設字體大小大多少或小多少。您可以指定爲<font size=「+n」>或<font size=「−n」>

Example

Live Demo 
<!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>

這將產生以下結果&負;

Setting Font Face

您可以使用face屬性設置字體，但請注意，如果查看頁面的用戶沒有安裝字體，他們將無法看到它。相反，用戶將看到適用於用戶計算機的默認字體。

Example

Live Demo 
<!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>

這將產生以下結果&負;

Specify alternate font faces

訪問者只有在計算機上安裝了您的字體時才能看到您的字體。因此，可以通過列出字體名稱（用逗號分隔）來指定兩個或多個字體名稱。

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

加載頁面時，瀏覽器將顯示可用的第一個字體。如果未安裝任何給定字體，則它將顯示默認字體面Times New Roman。

注意−檢查完整的html標準字體列表。

Setting Font Color

您可以使用color屬性設置您喜歡的任何字體顏色。可以通過顏色名稱或該顏色的十六進位代碼指定所需的顏色。

注意−您可以查看帶有代碼的完整列表。

Example

Live Demo 
<!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>

這將產生以下結果&負;

The <basefont> Element

<basefont>元素應該爲文檔的任何部分設置默認的字體大小、顏色和字體，否則這些部分不包含在<font>標記中。您可以使用<字體>元素覆蓋<基本字體>設置。

<basefont>標記還接受顏色、大小和面屬性，它將支持相對字體設置，爲較大的大小指定一個值+1，爲較小的兩個大小指定一個值&負;2。

Example

Live Demo 
<!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>

這將產生以下結果&負;