在HTML页面开发中，字体相关的设置是调整页面视觉效果的基础操作，早期开发常用font标签实现字体调整，现在更推荐通过CSS的font属性完成样式配置，两种方式的使用规则和适用场景有明显区别。
font标签的基础用法
font标签是HTML早期提供的用于设置字体样式的元素，属于表现性标签，现在HTML5规范中已经不推荐使用，但在维护旧项目时仍然可能会遇到。
核心属性说明
- face：设置字体族，可以指定多个字体，浏览器会按顺序优先使用前面存在的字体
- size：设置字体大小，取值范围是1到7，默认值为3，数值越大字体越大
- color：设置字体颜色，支持颜色名称、十六进制颜色值、rgb值等格式
使用示例
下面是一段使用font标签设置字体的示例代码：
<!-- 设置字体为微软雅黑，大小为5，颜色为红色 -->
<font face="微软雅黑, 宋体" size="5" color="#ff0000">
这是使用font标签设置的文本内容
</font>
使用限制
font标签的样式只能作用于标签内部的文本内容，无法实现复用，当页面需要统一修改字体样式时，需要逐个修改所有font标签，维护成本很高，因此新项目不建议使用。
CSS font属性的使用方法
CSS的font属性是用于设置字体样式的标准方式，支持更丰富的配置项，并且可以通过选择器实现样式复用，是当前前端开发的主流选择。
font属性的简写规则
font属性支持简写形式，语法顺序为：font: font-style font-variant font-weight font-size/line-height font-family;，其中font-size和font-family是必须设置的属性，其他属性可以省略使用默认值。
各子属性说明
| 属性名 | 作用 | 常用取值 |
|---|---|---|
| font-family | 设置字体族 | 微软雅黑, 宋体, Arial, sans-serif |
| font-size | 设置字体大小 | 16px, 1.2em, 1rem, larger |
| font-weight | 设置字体粗细 | normal, bold, 400, 700 |
| font-style | 设置字体样式 | normal, italic, oblique |
| font-variant | 设置小型大写字母 | normal, small-caps |
使用示例
下面是使用CSS font属性设置字体的示例代码：
/* 全局设置默认字体 */
body {
font: 16px/1.5 "微软雅黑", "Helvetica Neue", Arial, sans-serif;
}
/* 单独设置标题的字体样式 */
h1 {
font-weight: bold;
font-size: 24px;
color: #333333;
}
/* 使用简写形式设置特殊文本样式 */
.special-text {
font: italic bold 14px/1.2 "宋体", serif;
color: #666666;
}
两种方式的对比
font标签是HTML表现性标签，不符合结构与样式分离的开发原则，仅适用于旧项目维护；CSS font属性属于样式层配置，支持复用和统一管理，是新项目的首选方案。
在实际开发中，如果是新项目开发，建议完全使用CSS的font属性完成字体设置，避免引入font标签导致样式维护困难。如果是维护旧项目，可以逐步将font标签的样式替换为CSS样式，提升项目的可维护性。
HTML_fontfont标签CSS_font属性字体设置修改时间：2026-06-19 00:15:28