@font-face在ie或旧版safari不生效主因是浏览器遇首个不识别format()即跳过整条规则；须按“从旧到新”倒序声明src（eot→woff2→woff→ttf），eot需含embed标志，ttf省略format更稳妥，路径须相对css文件，font-family须与字体文件内嵌名称完全一致。
为什么@font-face在IE或旧版Safari里完全不生效
根本不是写法错误，而是浏览器遇到第一个不识别的 format() 就直接跳过整条 @font-face 规则——比如把 woff2 放最前，IE9 会忽略后续所有源；旧版 Safari 对 format('truetype') 解析不稳定，有时干脆跳过整个声明。
实操建议：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 按浏览器支持能力「从旧到新」倒序排列
src：先写url('font.eot')（IE9），再url('font.eot?#iefix') format('embedded-opentype')（IE6–8），接着url('font.woff2') format('woff2')，然后url('font.woff') format('woff')，最后url('font.ttf')（不加format('truetype')更稳妥） -
.eot文件必须含 embed 标志，普通导出的 .eot 在 IE9 中会被拒绝加载；可用 transfonter.org 转换并勾选 “Embed” - 避免在同一个
src声明里混用format('woff2')和format('truetype')—— Safari 7–9 容易因此整个规则失效
字体路径 404 或本地预览失败怎么快速定位
路径错是高频问题，但报错隐蔽：控制台常无提示，只在 Network 面板看到字体请求返回 404 或 pending 状态。
实操建议：
-
url()中的路径始终以 CSS 文件位置为基准，不是 HTML 所在目录。例如 CSS 在/css/style.css，字体在/fonts/inter.woff2，则必须写url("../fonts/inter.woff2") - 右键复制 Network 面板中字体请求的链接，在新标签页打开——能下载说明路径对，404 则立刻修正
- 本地双击 HTML 打开会触发
file://协议限制，字体必然失败；务必用live-server、npm run dev或 Python 的python -m http.server启服务预览 - Webpack/Vite 项目中，若构建后字体被哈希重命名（如
inter.abc123.woff2），但 CSS 里仍写原始文件名，就会 404；应改用@import或构建插件自动处理字体引用
font-display: swap 为什么不能省略
不设 font-display 时，浏览器默认采用 block 策略：等待字体加载最多 3 秒，期间文字空白（FOIT），超时后才用后备字体渲染——用户感知就是“闪白”或“卡顿”，尤其弱网下更明显。
实操建议：
- 一律显式加
font-display: swap;：立即用系统字体渲染，字体加载完瞬间替换，用户几乎无感 - 避免用
font-display: block（长空白）或fallback（替换窗口太短，可能永远不用自定义字体） - 若字体仅用于装饰性标题，可试
optional：网络慢时直接跳过加载，不阻塞渲染 - 注意：每个
@font-face都要单独声明font-display，它不继承
font-family 名称不一致导致字体“加载了却没用上”
浏览器加载字体文件成功，但 font-family: 'MyFont' 在元素上不生效，十有八九是名称对不上——font-family 值必须和字体文件内嵌的 PostScript Name 或 Full Name 完全一致，而非文件名或你随意起的名字。
实操建议：
- 用 FontDrop 上传
.ttf或.woff2，查看右侧显示的 “Full Name” 字段，复制它作为font-family值（注意保留空格和括号） - CSS 中调用时也必须带引号：
body { font-family: 'Inter Variable', sans-serif; }；不加引号或大小写/空格差一字符，就匹配失败 - 避免用中文名、含特殊符号（如
&、®）或纯数字开头的font-family，部分浏览器解析异常 - 检查是否被更高权重样式覆盖：开发者工具 → Elements → 查看 Computed 面板里的
font-family实际值，确认没被其他规则（如 Tailwind 的font-sans或!important）覆盖
eot?#iefix 必须紧跟在独立 eot 行之后，且 font-display 必须每条 @font-face 单独写——漏掉任意一项，都可能让某个浏览器彻底回退到系统字体。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
