Squarespace网站iOS端h1、h3标签自定义Druk字体无法显示问题求助

核心原因 #

• 你的@font-face规则存在语法错误：Druk字体的最后一个src属性末尾多了多余的逗号，iOS Safari对CSS语法错误容忍度较低，会直接忽略存在语法错误的@font-face块。
• 未给@font-face声明匹配的font-weight和font-style属性：iOS Safari要求标签使用的字重、字体样式必须和@font-face内声明的参数完全匹配才会加载字体。h1、h3标签默认自带font-weight:700的加粗属性，你未声明Druk字体的对应字重，系统找不到匹配字重的字体文件，就会回退到系统默认字体。你自定义的class没有继承h标签的默认加粗属性，因此可以正常加载字体。
• 部分选择器优先级不足：你写的h1 *仅匹配h1的子元素，未直接命中h1本身，Squarespace原生样式对h标签的选择器优先级更高，iOS端的样式优先级判断逻辑和桌面端存在差异，容易出现样式覆盖问题。

修复步骤 #

1. 修正Druk字体的@font-face规则，补全参数，移除语法错误：

@font-face {
  font-family: 'Druk';
  src: url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60e2217cf28d5b6438dec0a6/1625432444301/Druk-WideSuper.woff") format("woff"),
  url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d79feed113772d538dfa60/1624743919175/Druk+Wide+Super.otf") format("opentype"),
  url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60e14b574a328e7c1d6e62b4/1625377623541/Druk+Wide+Super.ttf") format("truetype"),
  url("https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60e22168d8478550d7974cc8/1625432424734/Druk+Wide+Super.eot") format("embedded-opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

2. 替换原有h1、h3的字体声明规则，显式指定匹配的字重，提高选择器优先级：

/* 覆盖原有h1、h3规则 */
h1, h1 * {
  font-family: 'Druk' !important;
  font-weight: 900 !important;
}
h3, h3 * {
  font-family: 'Druk' !important;
  font-weight: 900 !important;
}

3. 媒体查询内的h1、h3规则也同步添加font-weight: 900 !important;声明，保持参数一致。

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