在Safari / Chrome / Firefox中，字体的大小和线条差异很大

Question

在我的网站上，字体“掉落”的大小和方式在不同的浏览器中是非常不同的，这使设计非常糟糕。例如，如果我将标题匹配为2行，那么它在Safari / Firefox中将为3行，而在Chrome中为2行。但是，我注意到许多其他大型网站都没有此问题。我尝试同时使用px和em，但似乎没有任何改变。

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

编辑：问题似乎与字体有关。当我切换到Times New Roman时，它们看起来相同。但是，我使用的是最受欢迎的购买字体之一'Gilroy'。如何解决此问题？

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）