不同浏览器的自定义字体 (Safari/Chrome/Firefox)

Question

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

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

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

不同浏览器的自定义字体 (Safari/Chrome/Firefox)

Custom font different across browsers (Safari/Chrome/Firefox)

css

browser

fonts

cross-browser

font-face