HTML字体

原创

admin 4个月前 (08-07) 阅读数 20 #HTML

HTML字体

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

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>

元素

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

与标签类似，标签也接受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 <basefont> 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代码将产生四行具有不同字体外观、颜色和大小的文本。