目录
  1. WIKI教程
  2. 学习HTML
  3. HTML - Fonts

HTML - Fonts

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

字体标记有三个属性，称为size, color和face以自定义字体。 要在网页中随时更改任何字体属性，只需使用“font”标记即可。 在您使用“/ font”标记关闭之前，后面的文本将保持更改。 您可以在一个“font”标记内更改一个或所有字体属性。

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

设置字体大小

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

例子 (Example)

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

例子 (Example)

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

例子 (Example)

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

Note - 检查HTML Standard Fonts的完整列表。

设置字体颜色

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

Note - 您可以HTML Color Name with Codes检查HTML Color Name with Codes的完整列表。

例子 (Example)

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

这将产生以下结果 -

新页面打开

元素

元素应该为文档的任何部分设置默认字体大小，颜色和字体，否则这些部分不包含在标记中。 您可以使用元素覆盖设置。

标签还具有颜色，大小和面部属性，并且它将支持相对字体设置，方法是，对于较大的尺寸，将尺寸设置为+1;对于较小的两个尺寸，尺寸设置为-2。

例子 (Example)

<!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 - Colors
HTML - Forms.下一篇>
↑回到顶部↑
WIKI教程 @2018