不同浏览器的自定义字体（Safari/Chrome/Firefox）答案

【问题标题】：Custom font different across browsers (Safari/Chrome/Firefox)不同浏览器的自定义字体（Safari/Chrome/Firefox）
【发布时间】：2020-04-01 02:41:26
【问题描述】：

我的自定义字体（Gilroy，在 myfonts 上购买）在跨浏览器时出现问题。与其他浏览器相比，Chrome 中的字体更粗更大。

【问题讨论】：

标签： css browser fonts cross-browser font-face

【解决方案1】：

字体大小相同，但您在 Chrome 中的字母比在 Firefox 中更粗。那是因为你的字体导入错误。

目前您正在使用：

@font-face {
  font-family: "Cobury Regular";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cobury Bold";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

... {
  font-family: "Cobury Regular";
}
... {
  font-family: "Cobury Bold";
}

但正确的方法是：

@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

... {
  font-family: "Cobury";
  font-weight: normal;
}
... {
  font-family: "Cobury";
  font-weight: bold;
}

始终使用带有实际font-weight 的字体。不要把不同粗细和样式的同一种字体当作不同的字体。

您的.woff 字体文件在内部实现了元标记，它告诉浏览器字母的粗细。如果在 import 语句 @font-face 中提供的 font-weight 与它不匹配，浏览器会以不同的方式处理它，因为没有标准。（无论出于何种原因，Chrome 都会尝试通过为已经粗体添加额外粗细来处理这种情况。）

编辑：
我看到您在 CSS 中使用了h1, .text-logo #logo { font-weight: 900; ...，但您从未使用权重编号900 定义字体。请仅使用您通过@font-face 提供的权重。（我的建议是normal 和bold）

【讨论】：

您可以改用@font-face { font-weight: 500; ... 和@font-face { font-weight: 900; ...。那可能会更好。我不知道你的 Cobury Bold 字体的实际重量。可能是 900（=加粗）、800 或 700（=加粗）。
我不知道。我只能告诉你，他的做法很糟糕，因为它会导致这样的问题。对于您要使用的每种粗细和样式组合，都应该有一个由@font-face 定义的匹配条目。这是 CSS 中定义的标准。其他任何事情都可能（并且将会）导致不可预测的行为。