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

Question

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

这里是差https://imgur.com/a/c13oME6。测试地点为https://cobury.com/

Answer 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字体文件在内部实现了meta标记，该标记告诉浏览器字母的厚度。如果导入语句font-weight中提供的@font-face与之不匹配，浏览器将以不同的方式对待，因为没有标准。 （出于任何原因，Chrome都会通过在已经加粗的字体中增加额外的粗细来处理这种情况。）

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