时间戳

首页 > 解决方案 > 字体问题 - 不考虑粗细和行高问题

css - 字体问题 - 不考虑粗细和行高问题

问题描述

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

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

字体粗细被忽略。如果我将另一种字体添加到家族中，作为 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 * { line-height: 1.15 }

然后：

h1 { line-height: 1.5 }

h1 的行高被忽略。

标签： csssass

解决方案

1）您的“字体：”行格式略有偏差，请尝试在前面添加“正常”：

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/

因此，您需要在字体中包含 line-height：

font: normal 700 1.875rem/1.5 Gop;

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

推荐阅读