React应用中Calibri字体在iOS浏览器无法生效的问题求助

问题根源与修改方案 #

核心问题与对应修改点

• 修正字体权重匹配值：Calibri常规体（regular）对应的标准权重是400，而非你设置的500。iOS浏览器对字体权重的匹配规则更严格，权重不匹配时会直接忽略自定义字体， fallback到系统默认字体。
• 调整字体文件加载顺序：将woff2格式放在ttf之前，woff2压缩率更高，iOS 10+的Safari/Chrome均支持该格式，能优先加载更高效的字体文件。
• 优化本地字体调用逻辑：将local("Calibri")移到url()之后，避免部分系统中因本地字体识别问题干扰自定义字体加载（iOS未预装Calibri，但该调整能让规则更严谨）。
• 确认字体路径正确性：React项目中若index.css在src目录下，./assets/fonts/路径是正确的；若打包后路径异常，可尝试改为绝对路径/assets/fonts/...（需对应public目录下的资源结构）。

修改后的完整CSS代码

body {
  font-family: 'Calibri', sans-serif;
}

code {
  font-family: 'Calibri', source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

@font-face {
  font-family: "Calibri";
  src: url("./assets/fonts/calibri-bold.woff2") format("woff2"),
       url("./assets/fonts/calibri-bold.ttf") format("truetype"),
       local("Calibri");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Calibri";
  src: url("./assets/fonts/calibri-regular.woff2") format("woff2"),
       url("./assets/fonts/calibri-regular.ttf") format("truetype"),
       local("Calibri");
  font-weight: 400; /* 修正为常规体标准权重 */
  font-style: normal;
}

@font-face {
  font-family: "Calibri";
  src: url("./assets/fonts/calibri-bold-italic.woff2") format("woff2"),
       url("./assets/fonts/calibri-bold-italic.ttf") format("truetype"),
       local("Calibri");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Calibri";
  src: url("./assets/fonts/calibri-italic.woff2") format("woff2"),
       url("./assets/fonts/calibri-italic.ttf") format("truetype"),
       local("Calibri");
  font-weight: 400; /* 修正为常规斜体标准权重 */
  font-style: italic;
}

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