目录导航

HTML字体标签(<font>)用于指定HTML文档中文本的字体,大小和颜色。 但是HTML5不支持<font>标签,可以改用CSS。

1. HTML设置字体大小

使用size属性设置内容字体大小。可接受值的范围是1-7(小->大)。字体的默认大小为3
还可以使用字体大小(以像素和百分比为单位)。下面的示例显示如何在HTML中设置字体大小:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML字体示例</h2>    
    <p style="font-size:14px">HTML字体大小 (12px)</p>
    <p style="font-size:22px">HTML字体大小(22px)</p>
    <p style="font-size:80%">HTML字体大小(80%)</p>
    <p style="font-size:120%">HTML字体大小(120%)</p>
    <p style="font-size:1em">HTML字体大小(1em)</p>
    <p style="font-size:1.2em">HTML字体大小(1.2em)</p>
</body>
</html>

在浏览器中打开输出显示如下:

HTML设置字体大小

2. HTML设置文本字体

可以使用face属性设置字体,但是请注意,如果查看页面的用户浏览器未安装字体,则将无法看到字体。这种情况下用户将看到适用于该用户计算机的默认字体。

也可以使用font-family来设置文本的字体。下面的示例显示如何设置HTML文档中文本的字体:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML字体示例</h2>    
    <font face="sans-serif">使用HTML Font (sans-serif)</font><br />
    <font face="Times New Roman">使用 HTML Font (Times New Roman)<br />
    <p style="font-family:Microsoft Yahei">使用 HTML Font (Microsoft Yahei)</p>
    <p style="font-family:'Courier New'">使用 HTML Font (Courier New)</p>
</body>
</html>

在浏览器中打开输出显示如下:

HTML设置文本字体

3. HTML设置字体颜色

可以使用color属性设置任何字体颜色。通过颜色名称或十六进制代码或使用rgb值来指定所需的颜色。下面示例演示如何在HTML文档中设置字体颜色:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML字体示例</h2>    
    <font style="color:#abab;">使用HTML Font (sans-serif)</font><br />
    <font style="color:orange;">使用 HTML Font (Times New Roman)<br />
    <p style="color:rgb(100, 180, 190);">使用 HTML Font (Microsoft Yahei)</p>
</body>
</html>

在浏览器中打开输出显示如下:

HTML设置字体颜色