Question

我想使用自定义字体，所以我在下面添加了鳕鱼：

我验证了字体路径并且是正确的。

忽略字体粗细。如果我将其他字体添加到familly，作为Arial，直到它加载，它只需要Arial。

1

@font-face {
  font-family: Gop;
  src: url("../fonts/gop/normal/gop.eot");
  src: url("../fonts/gop/normal/gop.eot?#iefix") format("embedded-opentype"), url("../fonts/gop/normal/gop.woff") format("woff"), url("../fonts/gop/normal/gop.ttf") format("truetype"), url("../fonts/gop/normal/gop.svg#gop") format("svg");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: gop;
  src: url("../fonts/gop/bold/gop.eot");
  src: url("../fonts/gop/bold/gop.eot?#iefix") format("embedded-opentype"), url("../fonts/gop/bold/gop.woff") format("woff"), url("../fonts/gop/bold/gop.ttf") format("truetype"), url("../fonts/gop/bold/gop.svg#gop") format("svg");
  font-style: normal;
  font-weight: 700; }


h1 {
font: 700 1.875rem Gop;
}

p{
font: 400 1.875rem Gop;

}

如果重置，我有：

html * { line-height: 1.15 }

以后：

h1 { line-height: 1.5 }

忽略h1的行高。

Answer 1

1）您的“font：”行稍微格式化，尝试在前面添加“normal”：

font: normal 700 1.875rem Gop;

单行字体速记参考（订单事项）： https://css-tricks.com/snippets/css/font-shorthand/

一般来说，将字体声明分隔成单独的行更好，例如：

font-family: Gop;
font-weight: 700;
font-size: 1.875rem;

这有点长，但更容易解决问题。这导致了第二个问题......

2）使用CSS速记时需要指定所有属性，否则它们将返回默认值。

有关此信息： https://css-tricks.com/accidental-css-resets/

因此，您需要在字体中包含行高：

font: normal 700 1.875rem/1.5 Gop;

如果你将它分成单独的行，使用font-family，font-weight等，这不是问题。

字体问题 - 不考虑重量和线高问题

1 个答案: