使用@font-face可引入自定义字体，需定义font-family、src路径与格式，推荐包含woff2和woff以兼顾兼容性，设置font-display:swap避免文字闪烁，正确配置相对或绝对路径，并在CSS中调用自定义字体名称，同时指定备用字体确保可读性。
在网页设计中，使用自定义字体可以显著提升视觉效果和品牌一致性。CSS 的 @font-face 规则允许开发者引入非系统自带的字体文件，通过指定字体路径和格式来确保字体在不同浏览器中正确加载。
定义 @font-face 规则
使用 @font-face 时，需要为字体命名并提供字体文件的路径。浏览器会下载该字体，并在样式中通过 font-family 调用。
基本语法如下：@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
说明：
- font-family：定义一个自定义字体名称，后续 CSS 中将使用此名称引用该字体。
- src：指定字体文件路径及格式。建议提供多种格式以兼容不同浏览器。
- format()：告诉浏览器字体文件的类型，常见值有 woff2、woff、truetype 等。
选择合适的字体格式
不同浏览器对字体格式的支持存在差异，合理配置可提高加载成功率。
- WOFF2：压缩率高，现代浏览器普遍支持，优先使用。
- WOFF：兼容性好，适用于较老版本浏览器。
- TTF/OTF：通用但体积大，仅作为后备选项。
- EOT：仅用于旧版 IE，一般无需添加除非需支持 IE8 及以下。
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/mycustomfont.woff2') format('woff2'),
url('fonts/mycustomfont.woff') format('woff');
font-display: swap;
}
应用自定义字体
定义完成后，像使用系统字体一样在 CSS 中调用即可。
立即学习“前端免费学习笔记（深入）”；
body {
font-family: 'MyCustomFont', sans-serif;
}
注意：
- 始终提供备用字体（如 sans-serif），防止自定义字体加载失败导致文本不可读。
- 使用 font-display: swap 可避免文字长时间空白（FOIT），提升用户体验。
处理字体路径问题
确保字体文件路径正确是关键。路径是相对于 CSS 文件所在位置的。
- 若 CSS 文件位于
css/style.css，而字体在fonts/目录下，则路径应为../fonts/myfont.woff。 - 也可使用绝对路径（以 / 开头）或 CDN 链接。
- 检查浏览器开发者工具的“网络”标签页，确认字体文件是否成功加载。
基本上就这些。只要正确声明 @font-face、提供合适格式、设置合理路径和 fallback，就能顺利在网页中使用自定义字体。不复杂但容易忽略细节。
