在html5页面开发中，默认的网页字体通常比较单一，当设计稿要求使用特定字体时，就需要通过对应的技术手段更换页面显示字体。目前主流的实现方式有两种，分别是使用font-family属性调用系统自带字体，以及使用@font-face规则引入自定义外部字体。
一、使用font-family调用系统已有字体
font-family是CSS中用于设置元素字体的属性，它可以直接调用用户设备中已经安装的字体，这种方式不需要额外加载字体文件，加载速度更快，但依赖用户设备的字体库存情况，如果用户设备没有安装对应字体，就会 fallback 到后续设置的备选字体。
1. 基本语法
font-family的语法格式为：
/* 单个字体 */
selector {
font-family: 字体名称;
}
/* 多个字体备选，用逗号分隔，前面的字体优先 */
selector {
font-family: 首选字体, 备选字体1, 备选字体2, 通用字体族;
}
2. 使用示例
比如要给页面所有段落设置字体，优先使用微软雅黑，如果没有则使用宋体，最后 fallback 到无衬线字体族，代码如下：
p {
/* 字体名称如果有空格需要用单引号包裹 */
font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
}
需要注意的是，中文字体名称如果包含空格，必须用单引号包裹，否则CSS解析会出错。通用字体族包括serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）等，放在最后作为兜底选项。
二、使用@font-face引入自定义外部字体
如果需要使用系统没有预装的特定字体，就可以通过@font-face规则引入自定义字体文件，这种方式可以让所有用户看到的字体效果一致，不受设备字体库限制，但需要加载额外的字体文件，会增加一定的页面加载时间。
1. 基本语法
@font-face的规则定义如下：
@font-face {
/* 自定义字体名称，后续在font-family中调用 */
font-family: 自定义字体名;
/* 字体文件路径，支持多种格式兼容不同浏览器 */
src: url('字体文件地址.eot'); /* IE9兼容 */
src: url('字体文件地址.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('字体文件地址.woff2') format('woff2'), /* 现代浏览器优先使用 */
url('字体文件地址.woff') format('woff'), /* 现代浏览器兼容 */
url('字体文件地址.ttf') format('truetype'), /* Safari、Android、iOS */
url('字体文件地址.svg#自定义字体名') format('svg'); /* iOS 4.1- */
/* 可选：设置字体粗细 */
font-weight: normal;
/* 可选：设置字体样式 */
font-style: normal;
}
2. 使用示例
假设我们有一个名为custom-font的自定义字体，对应的字体文件放在项目的fonts目录下，那么完整的引入和使用代码如下：
/* 定义自定义字体 */
@font-face {
font-family: 'CustomFont';
src: url('fonts/custom-font.eot');
src: url('fonts/custom-font.eot?#iefix') format('embedded-opentype'),
url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff'),
url('fonts/custom-font.ttf') format('truetype'),
url('fonts/custom-font.svg#CustomFont') format('svg');
font-weight: normal;
font-style: normal;
}
/* 使用自定义字体 */
h1 {
font-family: 'CustomFont', sans-serif;
}
两种方法的适用场景对比
为了帮助开发者选择合适的方法，以下是两种换字体方式的对比：
| 对比维度 | font-family调用系统字体 | @font-face引入自定义字体 |
|---|---|---|
| 字体依赖 | 依赖用户设备已安装字体 | 不依赖用户设备，字体文件随页面加载 |
| 加载速度 | 快，无需加载额外文件 | 慢，需要加载字体文件 |
| 字体一致性 | 不同设备可能显示不同字体 | 所有用户显示效果一致 |
| 适用场景 | 通用字体需求，对字体一致性要求不高 | 特定品牌字体、设计稿指定字体需求 |
注意事项
- 使用@font-face引入字体时，需要注意字体文件的版权问题，不要随意使用未授权的商用字体。
- 字体文件体积通常较大，建议只引入项目必须的字体样式，比如只引入normal字重，不要引入所有字重和样式，避免影响页面加载性能。
- 在html5中，已经废弃了<font>标签，不要使用<font>标签来设置字体，统一使用CSS的font-family属性实现字体控制。
- 如果自定义字体加载失败，一定要设置合适的备选字体，避免页面出现不可读的字符。
html5font-family@font-face字体更换修改时间：2026-06-10 09:00:42