通过@font-face引入自定义字体可解决跨浏览器字体不一致问题，需使用woff2/woff格式并设置font-display:swap确保渲染一致性，同时配置合理回退链、控制字体体积、确保版权合规，从而实现各浏览器统一显示效果。
网页在不同浏览器中显示字体不一致，主要是因为系统默认字体不同，且浏览器对 font-family 的回退机制处理方式有差异。为解决这个问题，可以通过 @font-face 引入本地字体文件，并强制指定统一的字体集，确保各浏览器渲染效果一致。
使用 @font-face 引入自定义字体
通过 @font-face 规则，可以将字体文件（如 .woff、.woff2、.ttf 等）嵌入网页，使浏览器优先使用你指定的字体，而不是依赖用户系统的默认字体。
示例代码：
@font-face {font-family: 'CustomFont';
src: url('fonts/custom-font.woff2') format('woff2'),
url('fonts/custom-font.woff') format('woff');
font-display: swap;
}
body {
font-family: 'CustomFont', sans-serif;
}
说明：
立即学习“前端免费学习笔记（深入）”；
- font-family: 定义一个自定义字体名称，可在 CSS 中调用。
- src: 指定字体文件路径和格式，建议同时提供 woff2 和 woff 格式以兼容更多浏览器。
- font-display: swap; 确保文本在字体加载期间仍可显示，避免内容闪烁或长时间空白。
选择通用且兼容性好的字体格式
为了覆盖尽可能多的浏览器环境，推荐使用以下格式组合：
- .woff2： 现代浏览器主流格式，压缩率高，加载快。
- .woff： 兼容老版本浏览器（如 IE9+）。
- 必要时可添加 .ttf 或 .eot 支持更老设备（但通常非必需）。
设置统一的字体回退链
即使使用了自定义字体，也应设置合理的回退字体，防止加载失败时页面排版错乱。
例如：
body {font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
这样即使自定义字体失效，也能在不同操作系统上保持相近的视觉效果。
注意字体版权与性能
使用本地字体前需确认其允许 Web 嵌入（即拥有 @font-face 使用授权），避免法律风险。同时，字体文件不宜过大，可通过以下方式优化：
- 只包含需要的字重（如仅引入 400 和 700）。
- 使用字体子集化工具剔除无用字符（如仅保留中文常用字）。
- 配合 preload 预加载关键字体：
注意添加 crossorigin 属性，避免 CORS 问题导致加载失败。
基本上就这些。通过 @font-face 统一指定字体，能有效解决跨浏览器字体显示差异问题，关键是选对格式、控制体积、合法使用。
