FontAwesome 5 Unicode 支持内联字体 css

Question

我正在使用不支持字体粗细属性的库，但 fontstyle 由字体 css 属性定义，如解释的那样 here

所以我测试了 FontAwesome 5，通过字体 css 属性设置字体样式，但它不起作用。是我做错了什么还是 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 或 unset) 和 font-family。

来自MDN：

If font is specified as a shorthand for several font-related properties, then:

it must include values for:
<font-size>
<font-family>

it may optionally include values for:
<font-style>
<font-variant>
<font-weight>
<line-height>

font-style, font-variant and font-weight must precede font-size

font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps

line-height must immediately follow font-size, preceded by "/", like this: "16px/3"

font-family must be the last value specified.

另请注意，如果您确实遗漏了可选值，则会使用默认值 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";
}

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

<div class="calendar2"></div>

FontAwesome 5 Unicode 支持内联字体 css

FontAwesome 5 Unicode Support with inline font css

css

font-awesome-5