Html 简明教程

HTML - Fonts

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

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML  tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.

HTML 的 font 标签具有三个属性，分别是 size, color 、 face ，用于自定义字体。如果想随时更改网页中的任何字体属性，只需使用 标签。紧随其后的文本将保持更改，直到使用 标签关闭为止。你可以在一个 标签中更改一个或全部字体属性。

HTML font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the tag. The text that follows will remain changed until you close with the tag. You can change one or all of the font attributes within one tag.

Web Safe Fonts

CSS3 采用了字体组合技术。如果浏览器不支持第一种字体，则会尝试下一种字体。以下是 * CSS Web Safe Fonts.* 的列表：

CSS3 has adapted font combinations technology. If the browser doesn’t support the first font then it tries the next font. Here is the list of CSS Web Safe Fonts.

尝试单击图标运行按钮来运行以下 HTML 代码以查看输出。

Try to click the icon run button to run the following HTML code to see the output.

Examples of HTML Fonts

在下面的示例中，我们将看到“设置字体”、“相对字体大小”、“字体系列”的示例代码，以及有关 basefont 的说明。

In the bellow examples we will see the example codes of "Setting font", "Relative font Size", "Font face", knows about the basefont as well.

Set Font Size

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

To set the font size of a web page, we use the size attribute. This attribute allows us to set the font size between 1 to 7 where 1 is the smallest font size whereas, 7 is the largest. The default size of a font is 3.

下面的示例显示了如何使用 font 标签的 “size” 属性来设置字体大小。

The following example shows how to use the "size" attribute of font tag to set the font 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>

Relative Font Size

在 HTML 中，相对字体大小表示指定应比预设字体大小大或小多少个大小。我们可以指定类似  或 

In HTML, relative font size means specifying how many sizes larger or smaller than the preset font size should be. We can specify it like  or 

下面的代码演示了如何设置网页中文本的相对字体大小。

The code below demonstrates how to set the relative font size of texts in a web page.

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

Setting Font Face

你可以使用 face 属性设置字体系列，但请注意，如果查看页面的用户没有安装该字体，他们将无法看到该字体。相反，用户将看到适用于用户计算机的默认字体系列。

You can set font face using face attribute but be aware that if the user viewing the page doesn’t have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user’s computer.

在此示例中，我们通过使用“face”属性将多个字体系列设置为文本。

In this example, we are setting multiple font faces to the text by using "face" attribute.

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

Specify alternate Font Faces

访问者只有在其计算机上安装了该字体后，才能看到你的字体。因此，我们可以通过列出用逗号分隔的字体系列名称来指定两个或多个字体系列备选方案。

A visitor will only be able to see your font if they have that font installed on their computer. So, we can specify two or more font face alternatives by listing the font face names, separated by a comma.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

页面加载后，其浏览器将显示可用的第一个字体系列。如果未安装上面列出的字体，它将显示默认字体系列 Times New Roman。

When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.

Setting Font Color

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

We can set any font color of our choice to the texts using color attribute. To specify the color, we can use either the color name or hexadecimal code of that color.

Set Font Color

下面的示例说明了如何将颜色设置为网页中的文本。

The following example illustrates how to set color to the texts in a web page.

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

HTML <basefont> Element

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

HTML <basefont> element is used to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a tag. You can use the elements to override the <basefont> settings.

与 font 标签类似，<basefont> 标签也采用颜色、大小和系列属性，并且通过将大小赋予值为 +1 以获得较大或 −2 以获得较小的两个大小来支持相对字体设置。

Like font tag, the <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

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