如何在Chrome浏览器中使用SF Mono字体？

核心原因 #

Chrome对系统字体的名称匹配逻辑更严格，和Safari存在差异，常规写法无法被Chrome正确识别。

有效解决方案 #

1. 修正字体名称的大小写与匹配规则 #

字体名称区分大小写，将字体栈中的'SF mono'改为'SF Mono'，补充完整变体名称：

font-family: 'SF Mono', 'SFMono-Regular', ui-monospace, monospace;

2. 用@font-face精准映射本地字体 #

在Mac「字体册」中确认SF Mono的完整名称，通过@font-face明确指定：

/* 常规字重 */
@font-face {
  font-family: 'SF Mono';
  src: local('SF Mono Regular'), local('SFMono-Regular');
  font-weight: 400;
  font-style: normal;
}

/* 粗体字重（按需添加） */
@font-face {
  font-family: 'SF Mono';
  src: local('SF Mono Bold'), local('SFMono-Bold');
  font-weight: 700;
  font-style: normal;
}

之后直接使用定义好的字体名：

font-family: 'SF Mono', ui-monospace, monospace;

3. 清除Chrome字体缓存（若上述方法无效） #

• 关闭Chrome浏览器
• 前往路径：~/Library/Caches/Google/Chrome/Default/Fonts
• 删除该目录下所有文件
• 重启Chrome重试

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