HTML - 字体

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

字体标签具有三个属性，称为大小、颜色和外观，用于自定义字体。要随时更改网页中的任何字体属性，只需使用 <font> 标记即可。接下来的文本将保持更改状态，直到您使用 </font> 标记关闭为止。您可以更改一个 <font> 标记内的一项或全部字体属性。

注意-不推荐使用font和basefont标签，并且应该在 HTML 的未来版本中将其删除。所以不应该使用它们，建议使用 CSS 样式来操作你的字体。但仍然出于学习目的，本章将详细解释 font 和 basefont 标签。

设置字体大小

您可以使用size属性设置内容字体大小。接受值的范围是从 1（最小）到 7（最大）。字体的默认大小为 3。

例子

现场演示 
<!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>

这将产生以下结果 -

相对字体大小

您可以指定比预设字体大小大多少或小多少。您可以指定它，例如<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>

这将产生以下结果 -

设置字体

您可以使用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。

注意- 检查HTML 标准字体的完整列表。

设置字体颜色

您可以使用颜色属性设置您喜欢的任何字体颜色。您可以通过颜色名称或该颜色的十六进制代码来指定所需的颜色。

注意- 您可以检查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> 元素应该为文档中未包含在 <font> 标记中的任何部分设置默认字体大小、颜色和字体。您可以使用 <font> 元素来覆盖 <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>

这将产生以下结果 -