@font-face 声明不遵循 fontspring 防弹语法错误答案

【问题标题】：@font-face declaration doesn't follow the fontspring bulletproof syntax error@font-face 声明不遵循 fontspring 防弹语法错误
【发布时间】：2021-09-06 14:51:26
【问题描述】：

我一直在尝试使用字体规则更改我的字体，但它不起作用。它每次都显示“@font-face 声明不遵循 fontspring 防弹语法”。我浏览了网络，但没有找到任何正确的解决方案？这是我的代码：

@font-face {
  font-family: "MyFont";
  src: url(fonts/Benne-Regular.ttf) format("truetype");
}
h1 {
  font-family: "MyFont";
}

我该怎么办？

【问题讨论】：

url(...) 中的网址是否用引号括起来？

标签： html css font-face

【解决方案1】：

我不知道除了 CSS Lint 是否有任何其他 linter 对此进行检查，但这是对 ?#iefix 字符串的引用，该字符串用于解决旧的 Internet Explorer 错误并解析字体 URL，即 Fontspring calls the bulletproof @font-face syntax。

如果您不支持旧版本的 IE，您可以放心地忽略此警告，我强烈建议您禁用 CSS Lint 并改用 stylelint 之类的东西。 CSS Lint 多年未更新，防弹语法是时代的产物，所以今天不再需要。

如果您正在支持旧 IE，或者无法禁用 CSS Lint 并希望消除此警告：

@font-face {
font-family: "MyFont";
src: url("fonts/Benne-Regular.ttf?#iefix") format("truetype");
}
h1 {
font-family: "MyFont";
}

【讨论】：

【解决方案2】：

您的格式似乎正确，因为 Roddy 提到检查您的网址，这是您使用 google cdn 使用 Benne 字体的代码

@font-face {
font-family: "MyFont";
  src: url(https://fonts.gstatic.com/s/benne/v10/L0xzDFAhn18E6Wj2nN8.woff2) format('woff2');
}
h1 {
font-family: "MyFont";
}

&lt;h1&gt;test&lt;/h1&gt;

【讨论】：