css - 字体问题——没有考虑粗细和行高问题

Question

我想使用自定义字体，所以我添加了下面的代码:

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

字体粗细被忽略。如果我向该系列添加另一种字体，如 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;

---

1. 如果重置我有:

html * {
行高:1.15
}

及以后:

h1 {
行高: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;

如果您将它分成单独的行，使用字体系列、字体粗细等，这不是问题。