使用@import引入在线字体库，如Google Fonts，适合快速接入但影响性能；2. 通过link标签在HTML头部引入字体CSS，异步加载更高效；3. 使用@font-face定义本地或远程字体文件，需确保路径正确并优先使用woff2格式；4. 优化建议包括设置font-display: swap避免文字不可见、选用woff2节省带宽、配合font-loading API控制及减少HTTP请求。线上字体推荐用link引入，自定义字体宜用@font-face。
要在网页中引入字体库对应的CSS文件并正确加载自定义字体，关键在于使用正确的引用方式和确保资源路径无误。以下是几种常用的CSS字体加载方法。
1. 使用 @import 引入在线字体库
可以在CSS文件或
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
这种方法适合快速接入公共字体库，但注意@import会影响页面加载性能，应尽量减少使用或放在CSS最前面。
2. 通过 link 标签引入字体CSS
在HTML的
中使用标签引入远程字体文件，是最推荐的方式：立即学习“前端免费学习笔记（深入）”；
googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">浏览器会异步加载该CSS，并自动应用其中定义的@font-face规则。这种方式不会阻塞渲染，比@import更高效。
3. 使用 @font-face 自定义本地或远程字体
如果使用自己的字体文件（如woff、woff2），可通过@font-face手动定义：
@font-face {
font-family: 'MyCustomFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
然后在样式中使用：
h1 {
font-family: 'MyCustomFont', serif;
}
确保字体路径正确，woff2格式优先，兼容性好且体积小。
4. 字体加载优化建议
- 使用font-display: swap 避免文字长时间不可见（FOIT）
- 优先使用woff2格式，节省带宽
- 对重要字体可配合font-loading API实现更精细控制
- 避免从多个来源加载字体，减少HTTP请求
基本上就这些。选择合适的方法取决于你使用的字体来源和项目需求。线上字体用link引入最稳妥，自定义字体则用@font-face更灵活。
