HTML - 字体

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

HTML 字体标签具有三个属性，分别称为大小、颜色和字体，用于自定义字体。要随时更改网页中的任何字体属性，只需使用 标签即可。后面的文本将保持更改状态，直到您使用 标记关闭。您可以更改一个 标记中的一个或所有字体属性。

现在 font 和 basefont 标签已弃用，可能会在将来的 HTML 版本中删除。因此，现在不应再使用它们，而是建议使用CSS样式来操作字体。但出于学习目的，本章将详细解释字体和基本字体标签。

Web 安全字体

CSS3 采用了字体组合技术。如果浏览器不支持第一种字体，则尝试使用下一种字体。这是CSS Web安全字体的列表。

尝试运行以下 HTML 代码以查看输出。

HTML 字体示例

在下面的示例中，我们将看到“设置字体”、“相对字体大小”、“字体面”的示例代码，也知道基本字体。

设置字体大小

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

以下示例演示如何使用字体标记的“size”属性来设置字体大小。


<!DOCTYPE html>
<html>
<head>
<title>设置字体大小</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>相对字体大小</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>字体</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。

注意：查看 HTML 标准字体的完整列表。

设置字体颜色

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

注意：您可以查看带有代码的 HTML 颜色名称的完整列表。

设置字体颜色

下面的示例演示如何为网页中的文本设置颜色。


<!DOCTYPE html>
<html>
<head>
<title>设置字体颜色</title>
</head>
<body>
<font color = "#FF00FF">这是粉红色字体</font><br />
<font color = "red">这是红色字体</font>
</body>
</html>

HTML <basefont> 元素

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

与字体标签一样，<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>

打印本页