Html 简明教程

HTML - Fonts

字体在使网站更方便用户和提高内容可读性方面发挥着非常重要的作用。字体和颜色完全取决于用来查看您的页面的计算机和浏览器，但是您可以使用 HTML * <font>* 标记向您的网站上的文本添加样式、大小和颜色。您可以使用 * <basefont>* 标记将您的所有文本设置为相同的大小、字体和颜色。

HTML 的 font 标签具有三个属性，分别是 size, color 、 face ，用于自定义字体。如果想随时更改网页中的任何字体属性，只需使用 <font> 标签。紧随其后的文本将保持更改，直到使用 </font> 标签关闭为止。你可以在一个 <font> 标签中更改一个或全部字体属性。

Web Safe Fonts

CSS3 采用了字体组合技术。如果浏览器不支持第一种字体，则会尝试下一种字体。以下是 * CSS Web Safe Fonts.* 的列表：

尝试单击图标 运行按钮来运行以下 HTML 代码以查看输出。

Examples of HTML Fonts

在下面的示例中，我们将看到“设置字体”、“相对字体大小”、“字体系列”的示例代码，以及有关 basefont 的说明。

Set Font Size

要设置网页的字体大小，我们使用 size 属性。该属性允许我们在 1 到 7 之间设置字体大小，其中 1 是最小的字体大小，而 7 是最大的字体大小。字体的默认大小是 3。

下面的示例显示了如何使用 font 标签的 “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>

Relative Font Size

在 HTML 中，相对字体大小表示指定应比预设字体大小大或小多少个大小。我们可以指定类似 <font size = "+n"> 或 <font size = "−n">

下面的代码演示了如何设置网页中文本的相对字体大小。

<!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 属性设置字体系列，但请注意，如果查看页面的用户没有安装该字体，他们将无法看到该字体。相反，用户将看到适用于用户计算机的默认字体系列。

在此示例中，我们通过使用“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>

Specify alternate Font Faces

访问者只有在其计算机上安装了该字体后，才能看到你的字体。因此，我们可以通过列出用逗号分隔的字体系列名称来指定两个或多个字体系列备选方案。

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

页面加载后，其浏览器将显示可用的第一个字体系列。如果未安装上面列出的字体，它将显示默认字体系列 Times New Roman。

Setting Font Color

我们可以使用 color 属性将我们选择的任何字体颜色设置到文本。要指定颜色，我们可以使用颜色名称或该颜色的十六进制代码。

Set Font Color

下面的示例说明了如何将颜色设置为网页中的文本。

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

HTML <basefont> Element

HTML * <basefont>* 元素用于为文档中未包含在 <font> 标签中的任何部分设置默认字体大小、颜色和字体。你可以使用 <font> 元素来覆盖 <basefont> 设置。

与 font 标签类似，<basefont> 标签也采用颜色、大小和系列属性，并且通过将大小赋予值为 +1 以获得较大或 −2 以获得较小的两个大小来支持相对字体设置。

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