HTML - 字体介绍 首页HTMLHTML - 字体

我们可以使用HTML  font 标签为网站上的文本添加样式,大小和颜色。 您可以使用basefont标签将所有文本设置为相同的大小,外观和颜色。

注意-不推荐使用 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>相对字体大小</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 。

设置字体颜色

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

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

<!DOCTYPE html>
<html>

   <head>
      <title>设置字体颜色</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设置。

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

这将产生以下输出-

这一章你学到了什么?做个笔记,好记忆不如烂笔头! 如果觉得对您有帮助,请分享给您的朋友。

祝学习愉快! (您也可以 选中需要修改的内容->右键->进行编辑)

点我分享笔记