为何iPad与Mac端Safari浏览器显示字体存在差异？

问题描述 #

在Safari中加载目标网站时，Mac和iPad端的“Responsive Test”文本字体显示不一致：Mac端呈现自定义的SFPro-Medium字体，iPad端显示为系统默认字体。相关CSS配置如下：

.breadcrumb-link {
    font-family: SFPro-Medium;
    font-size: 22px;
    color: #c14953;
}

@font-face {
    font-family: SFPro-Medium;
    src: url(/fonts/SF-Pro.ttf);
    font-weight: medium;
    font-display: swap;
}

差异原因 #

1. font-weight配置兼容性问题：CSS规范中font-weight的关键字medium虽被部分浏览器支持，但iPad端Safari可能无法正确识别，导致无法匹配自定义字体，触发系统 fallback 字体。
2. 单一字体格式限制：仅提供TTF格式字体，iPad和Mac的Safari在字体文件解析、渲染逻辑上存在细微差异，TTF格式在移动端可能出现加载或识别异常。
3. 字体名称冲突：自定义字体命名为SFPro-Medium，与苹果系统自带的SF Pro字体名称相近，不同设备上浏览器优先选择系统字体还是自定义字体的逻辑不同，引发显示差异。
4. 字体文件完整性问题：若SF-Pro.ttf文件未包含完整的medium字重字形，iPad端Safari无法加载有效字体，会自动切换到系统字体。

解决方法 #

• 修正font-weight取值：将font-weight: medium;改为对应标准数值500，确保跨设备兼容性：

  @font-face {
      font-family: SFPro-Medium;
      src: url(/fonts/SF-Pro.ttf);
      font-weight: 500;
      font-display: swap;
  }
  

• 添加多格式字体文件：补充WOFF2、WOFF等Web优化字体格式，让浏览器自动选择适配格式，提升兼容性与加载速度：

  @font-face {
      font-family: SFPro-Medium;
      src: url(/fonts/SF-Pro.woff2) format('woff2'),
           url(/fonts/SF-Pro.woff) format('woff'),
           url(/fonts/SF-Pro.ttf) format('truetype');
      font-weight: 500;
      font-display: swap;
  }
  

• 优化字体fallback链：修改font-family明确自定义字体优先级，可重命名自定义字体避免与系统字体冲突，同时添加系统字体作为 fallback：

  .breadcrumb-link {
      font-family: 'SFPro-Custom-Medium', 'SF Pro Medium', -apple-system, sans-serif;
      font-size: 22px;
      color: #c14953;
      font-weight: 500;
  }
  

• 验证字体文件完整性：使用FontForge等字体工具检查SF-Pro.ttf是否包含medium（500）字重的字形，若缺失需替换为完整字体文件。
• 清除浏览器缓存：在iPad和Mac的Safari中清除缓存后重新加载页面，排除旧缓存资源导致的显示异常。

内容的提问来源于stack exchange，提问作者János