iOS设备上Cairo Play字体无法正常渲染问题求助

从Google Fonts下载的Cairo Play字体仅包含TTF格式文件，该字体在Chrome浏览器中显示正常，但在iOS设备上无法正常渲染。当前使用的@font-face配置如下：

@font-face {
  font-family: "CairoPlay";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../../assets/fonts/CairoPlay-Light.ttf") format("truetype");
}

@font-face {
  font-family: "CairoPlay";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../../assets/fonts/CairoPlay-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "CairoPlay";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../../assets/fonts/CairoPlay-Bold.ttf") format("truetype");
}

iOS设备显示异常效果：

请问是否需要更换字体，或是有其他可行修复方案？

不需要更换字体，可尝试以下几种可行方案：

• 添加WOFF2格式字体文件
  iOS对WOFF2格式的支持更稳定，可从Google Fonts重新下载包含WOFF2的字体包，或用工具将现有TTF转换为WOFF2格式。更新@font-face配置，优先加载WOFF2，再回退到TTF：

  @font-face {
    font-family: "CairoPlay";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../../assets/fonts/CairoPlay-Light.woff2") format("woff2"),
         url("../../assets/fonts/CairoPlay-Light.ttf") format("truetype");
  }
  /* 其他字重的配置同理修改 */
  

• 检查字体文件完整性
  重新从Google Fonts下载对应字重的Cairo Play字体，避免下载过程中文件损坏，替换现有文件后再测试iOS渲染效果。

• 添加iOS字体渲染优化属性
  在全局样式或使用该字体的元素上添加以下CSS，优化iOS端的字体渲染表现：

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  

• 验证字体字重匹配
  确保页面中使用的font-weight值与@font-face声明的完全一致，比如不要给声明了300字重的字体设置font-weight: 350，iOS对字重匹配的要求更严格。

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