字体在某些浏览器不显示是因为仅提供单一格式（如仅.woff2），旧版浏览器（IE9–11、老版Safari等）不支持；应通过@font-face按“从新到旧”顺序声明.woff2、.woff、.eot/.ttf等多种格式以确保兼容。
字体在某些浏览器不显示，通常是因为只提供了单一格式（比如仅 .woff2），而旧版浏览器（如 IE9–11、老版 Safari 或 Android Browser）不支持该格式。解决方法是通过 @font-face 声明多种字体格式，并按兼容性顺序排列，让浏览器自动选择它能加载的最优格式。
提供多格式字体文件
现代项目建议至少包含以下三种格式：
- .woff2：压缩率高、性能好，Chrome、Firefox、Edge、Safari 10+ 支持；作为首选格式放在最前
- .woff：兼容性更广，支持 IE9+、Android 4.4+、iOS 5.1+；作为第二选择
- .ttf 或 .eot：IE9 及更早版本需要 .eot；.ttf 在部分旧 Android 和 Safari 中可用（但不推荐单独用）
正确书写 @font-face 规则
按“从新到旧”顺序声明 src，浏览器会跳过不识别的格式，取第一个可加载的：
@font-face {font-family: 'MyFont';
src: url('myfont.eot'); /* IE9 */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6–IE8 */
url('myfont.woff2') format('woff2'), /* 现代浏览器首选 */
url('myfont.woff') format('woff'), /* 广泛兼容 */
url('myfont.ttf') format('truetype'); /* 备用，如 iOS font-weight: normal;
font-style: normal;
}
注意字体路径与 MIME 类型
确保服务器正确返回字体文件的 MIME 类型，否则某些浏览器（尤其是 IE 和旧版 Safari）会拒绝加载：
立即学习“前端免费学习笔记（深入）”；
- .woff2 →
font/woff2 - .woff →
font/woff - .eot →
application/vnd.ms-fontobject - .ttf →
font/truetype
若用 Nginx 或 Apache，需配置对应的 type 映射；使用本地开发服务器（如 Vite、Webpack Dev Server）一般已内置支持。
避免字体闪动（FOIT/FOUT）并提升加载体验
字体加载期间可能出现空白（FOIT）或回退字体（FOUT）。可通过 CSS 控制：
- 用
font-display: swap强制使用回退字体，等自定义字体就绪后替换（推荐，兼顾性能与体验） - 确保
font-family声明中包含合理回退链，例如：font-family: 'MyFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - 避免在
@font-face中滥用font-weight/font-style变体，未声明的变体会触发额外请求或回退失败
