如何在MacOS及iOS的Safari中使用本地已安装的自定义字体

问题核心原因 #

你的代码存在2个直接导致在线环境失效的错误：

• 多个src属性分开声明，后面的声明会直接覆盖前面的，你写的前两个src完全不生效，仅剩的第三个file://路径的src在HTTP/HTTPS环境下会被浏览器的跨源安全策略拦截，无法加载
• Safari对local()函数的字体名称校验严格，必须和字体的PostScript名称完全一致，不能直接用字体安装后显示的可视化名称

修复步骤 #

1. 先确认字体的PostScript名称 #

打开Mac自带的「字体册」应用，找到你安装的AHRDIcons字体，按Command + I打开详情页，复制「PostScript名称」栏的完整内容，这才是你需要填到代码里的正确名称。

2. 修正CSS写法 #

如果你不需要Web字体兜底，直接删掉所有url相关的配置，推荐两种兼容Safari的写法：

方案1：使用@font-face声明

@font-face {
    font-family: 'AHRDIcons'; /* 这里的名称可以自定义，后续引用保持一致即可 */
    src: local('这里替换成你刚才查到的PostScript名称');
    /* 显式声明字重和样式，和你实际使用的场景保持一致 */
    font-weight: normal;
    font-style: normal;
}

/* 后续使用 */
.icon-element {
    font-family: 'AHRDIcons', sans-serif;
}

方案2：直接调用系统字体（更简单，无需@font-face）

如果没有特殊配置需求，不需要写@font-face，直接在需要使用字体的元素上声明即可：

.icon-element {
    /* 这里直接填你查到的PostScript名称，加引号 */
    font-family: '这里替换成你刚才查到的PostScript名称', sans-serif;
}

额外注意事项 #

• iOS端安装的自定义字体需要通过描述文件方式全局安装，才能被Safari识别调用，仅在个别App内安装的字体无法被系统全局读取
• 如果你后续需要加Web字体兜底，多个源要写在同一个src属性内，用逗号分隔，浏览器会按顺序尝试加载：

  src: local('PostScript名称'), url('AHRDIcons.ttf') format('truetype');
  

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