Question

我正在使用一个不支持font-weight属性的库，而是由font css属性将fontstyle定义为Quartz

所以我测试了FontAwesome 5，并通过font css属性设置了fontstyle，但是它不起作用。我是在做错什么，还是FontAwesome 5不支持这种定义字体样式的模式？

.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: "400 Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="calendar"></div>

<div class="calendar2"></div>

Answer 1

我看到两个错误：

font具有2个必填属性：大小和家庭。您只指定了家庭。
双引号内的文本是单个值，因此包含400使其成为值的一部分，因此不是先前的值。

尝试这样的事情：

.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: 400 1em "Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="calendar"></div>

<div class="calendar2"></div>

Answer 2

这与FontAwesome无关。

在指定font时，您必须至少包含font-size（在这种情况下必须为大小，而不是initial，inherit或{{1 }}和unset。

来自MDN：

如果将字体指定为几个与字体相关的属性的简写，则：


它必须包含以下值：



它可以选择包含以下值：







字体样式，字体变体和字体粗细必须在字体大小之前



font-variant只能指定CSS 2.1中定义的值，即普通和小写字母


line-height必须紧随字体大小之后，以“ /”开头，例如：“ 16px / 3”

字体家族必须是最后指定的值。

还请注意，如果您确实省略了可选值，则会在其位置使用默认值font-family，覆盖先前设置的值。

请尝试：

normal

.calendar::before {
  font-family: "Font Awesome 5 Free";  /* updated font-family */
  font-weight: 400; /* regular style/weight */
  content: "\f133";
}

.calendar2::before {
  font: 400 16px "Font Awesome 5 Free";  /* updated font-family */
  content: "\f133";
}

FontAwesome 5 Unicode支持和内联字体CSS

2 个答案: