HTML字体设置，从基础迈向进阶的奥秘

2026-02-07 22:00:40 2阅读
本文围绕 HTML 中字体设置展开探讨，先介绍基础内容，涵盖在 HTML 中定义字体的基本标签与属性，如`标签及其相关属性在早期设置字体样式的应用等，而后进入进阶层面，包括 CSS 样式表对字体设置的强大支持，像使用font - family指定字体族、font - size控制字体大小、font - weight`设置字体粗细等，还可能涉及到字体的导入与更复杂的字体排版技巧，旨在让读者全面掌握 HTML 中字体设置的相关知识。

在网页开发的世界里,HTML 就像是一座大厦的基石，而字体设置则是为这座大厦增添独特风格与良好可读性的重要元素，合理的字体设置不仅能提升网页的美观度，还能帮助用户更舒适地浏览页面内容，下面我们就来深入探讨一下在 HTML 中如何进行字体设置。

使用 <font> 标签（不推荐的传统方式）

在早期的 HTML 版本中，<font> 标签被广泛用于设置字体相关属性。

HTML字体设置，从基础迈向进阶的奥秘

<font face="Arial" size="4" color="red">这是一段使用 Arial 字体，大小为 4，颜色为红色的文字。</font>

在上述代码中,face 属性用于指定字体名称，size 属性设置字体大小（取值范围一般为 1 - 7），color 属性定义字体颜色，随着 HTML 5 的发展，<font> 标签已经被弃用，因为它不符合语义化和样式与结构分离的原则，现在更多地推荐使用 CSS 来进行字体设置。

利用 CSS 进行字体设置

（一）设置字体家族（font - family）

在 CSS 中，font - family 属性用于指定文本的字体家族，它可以列出多个字体名称，浏览器会按照顺序依次查找系统中已安装的字体来显示文本。

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font - family: Arial, sans - serif;
    }
  </style>
</head>
<body>
  <p>这是一段使用 Arial 或 sans - serif 字体的文本。</p>
</body>
</html>

上述代码中,优先尝试使用 Arial 字体，如果用户系统中没有安装 Arial 字体，则会使用 sans - serif 这种通用字体系列来显示。

（二）设置字体大小（font - size）

font - size 属性用于控制字体的大小，它有多种取值方式，常见的有像素（px）、百分比（%）、em 和 rem 等，以像素为例：

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      font - size: 36px;
    }
  </style>
</head>
<body>
  <h1>这是一个 36 像素大小的标题。</h1>
</body>
</html>

使用百分比时,字体大小是相对于父元素的字体大小来计算的。

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      font - size: 16px;
    }
    p {
      font - size: 120%;
    }
  </style>
</head>
<body>
  <div>
    <p>这段文字的字体大小是父元素 div 字体大小的 120%，即 19.2 像素（16 * 1.2）。</p>
  </div>
</body>
</html>

（三）设置字体粗细（font - weight）

font - weight 属性用于调整字体的粗细程度，可以取值为具体的数值（如 100 - 900，400 相当于正常粗细，700 相当于加粗），也可以使用关键字如 normal（正常）、bold（加粗）等，示例如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    strong {
      font - weight: 700;
    }
  </style>
</head>
<body>
  <p>这是一段普通文字，<strong>这里的文字被加粗</strong>。</p>
</body>
</html>

（四）设置字体样式（font - style）

font - style 属性主要用于设置字体是否为斜体，取值有 normal（正常）、italic（斜体）和 oblique（倾斜体，与 italic 有些细微差别）。

<!DOCTYPE html>
<html>
<head>
  <style>
    em {
      font - style: italic;
    }
  </style>
</head>
<body>
  <p>这是一段普通文字，<em>这里的文字是斜体</em>。</p>
</body>
</html>

引入外部字体

除了使用系统自带的字体外,我们还可以通过 @font - face 规则引入外部字体，需要准备好字体文件（常见格式有 .ttf、.woff、.woff2 等），然后在 CSS 中进行如下设置：

<!DOCTYPE html>
<html>
<head>
  <style>
    @font - face {
      font - family: 'MyCustomFont';
      src: url('your - font - file.woff2') format('woff2'),
        url('your - font - file.woff') format('woff');
    }
    h2 {
      font - family: 'MyCustomFont';
    }
  </style>
</head>
<body>
  <h2>这是使用自定义外部字体显示的标题。</h2>
</body>
</html>

这样,即使在用户系统中没有安装相应字体的情况下，也能正确显示我们期望的字体样式。

HTML 中的字体设置是网页设计中不可忽视的一环，通过合理运用 CSS 中的各种字体相关属性以及外部字体引入的 *** ，我们可以打造出美观、易读且富有个性的网页界面，为用户带来更好的浏览体验。

相关阅读