使用@font-face引入Hack字体在Safari中失效的问题求助

核心问题分析 #

你当前的@font-face代码存在关键错误：src指向的是**CSS文件（hack.min.css）**而非字体文件，这不符合@font-face的语法规范。Chrome可能通过兼容逻辑解析，但Safari对语法和资源类型的校验更严格，导致字体加载失败。

修复方案 #

方案1：直接使用CDN提供的完整字体样式文件 #

Hack字体的CDN资源中，hack.min.css已经包含了正确的@font-face规则（覆盖所有字重、样式和兼容格式），你不需要自己编写@font-face，只需在页面中引入该CSS文件即可：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/hack.min.css">

之后直接在CSS中使用：

body {
  font-family: Hack, monospace;
}

方案2：手动编写正确的@font-face规则 #

如果需要自定义字体加载逻辑，需直接引用字体文件（注意提供多格式兼容Safari），并修正语法错误：

/* 常规字重 */
@font-face {
  font-family: 'Hack';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-regular.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-regular.woff') format('woff'),
       url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

/* 粗体字重 */
@font-face {
  font-family: 'Hack';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bold.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bold.woff') format('woff'),
       url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

/* 粗体斜体 */
@font-face {
  font-family: 'Hack';
  src: url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bolditalic.woff2') format('woff2'),
       url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bolditalic.woff') format('woff'),
       url('https://cdnjs.cloudflare.com/ajax/libs/hack-font/3.3.0/web/fonts/hack-bolditalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
}

注意：

• CSS注释需使用/* */，而非//（//是JavaScript注释语法，部分浏览器不兼容）
• 优先使用woff2格式，Safari 10.1+已支持该格式，同时提供woff和ttf作为降级方案
• 必须明确指定font-weight和font-style，否则Safari无法正确匹配字体

方案3：本地字体文件加载（若使用本地资源） #

如果使用本地字体文件，需修正路径问题（使用正斜杠/而非反斜杠\），并确保服务器配置允许字体文件跨域访问（若部署在不同域名下）：

@font-face {
  font-family: 'Hack';
  src: url('/font/Hack-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

额外排查点 #

• 检查Safari是否开启了「阻止跨域资源」：在Safari偏好设置-隐私中关闭该选项测试
• 添加font-display: swap属性，避免字体加载失败时无 fallback 字体：

  @font-face {
    /* ... 其他属性 ... */
    font-display: swap;
  }
  

• 验证字体文件URL是否可正常访问：直接在Safari地址栏输入字体URL，确认能下载文件

内容的提问来源于stack exchange，提问作者pineapple