问题背景 #

使用以下自定义字体CSS代码，在GoHighLevel网站编辑器、Mac端显示正常，但iOS模拟器中显示效果差，字体样式不匹配，Android端显示正常，网站基于GoHighLevel搭建。

@font-face {
font-family: Podium;
src: url(https://cdn.courses.apisystem.tech/memberships/qSaAvd59RpGDBGLYrvoi/post-materials/f2a2d2d7-2924-4273-b8a4-efceb8880763/Fontspring-DEMO-podiumsharp-2-ijfe.woff2) format('woff2');
} 
.podium {
font-family: Podium !important;
font-weight: 800;
font-style: normal;
letter-spacing: -1.2;
-webkit-font-smoothing: antialiased;
}

解决步骤 #

• 补全@font-face的权重与样式声明
  iOS对@font-face的属性匹配要求严格，原代码未指定font-weight和font-style，导致系统无法正确映射字体样式，修改后：

  @font-face {
    font-family: Podium;
    src: url(https://cdn.courses.apisystem.tech/memberships/qSaAvd59RpGDBGLYrvoi/post-materials/f2a2d2d7-2924-4273-b8a4-efceb8880763/Fontspring-DEMO-podiumsharp-2-ijfe.woff2) format('woff2');
    font-weight: 800; /* 与.podium类的权重保持一致 */
    font-style: normal;
  }
  

• 修正letter-spacing的单位缺失问题
  原代码letter-spacing: -1.2未指定单位，iOS浏览器解析会出现异常，补充单位后：

  .podium {
    font-family: Podium !important;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -1.2px; /* 补充px单位，也可根据需求使用em */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; /* 优化Mac/iOS端字体平滑效果 */
  }
  

• 提升自定义样式优先级
  GoHighLevel自带的全局样式可能覆盖自定义字体规则，通过增加选择器特异性提升优先级：

  body .podium {
    font-family: Podium !important;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -1.2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  

• 增加字体格式 fallback 与加载策略
  部分旧版iOS对woff2支持有限，补充woff格式作为备选，并添加font-display: swap避免页面加载时出现无文本状态：

  @font-face {
    font-family: Podium;
    src: url(your-font-file.woff) format('woff'), /* 需补充对应woff格式字体文件 */
         url(https://cdn.courses.apisystem.tech/memberships/qSaAvd59RpGDBGLYrvoi/post-materials/f2a2d2d7-2924-4273-b8a4-efceb8880763/Fontspring-DEMO-podiumsharp-2-ijfe.woff2) format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  

• 强制刷新iOS浏览器缓存
  iOS Safari缓存机制可能导致字体未更新，在字体URL后添加版本参数强制刷新：

  src: url(https://cdn.courses.apisystem.tech/memberships/qSaAvd59RpGDBGLYrvoi/post-materials/f2a2d2d7-2924-4273-b8a4-efceb8880763/Fontspring-DEMO-podiumsharp-2-ijfe.woff2?v=1) format('woff2');
  

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