在伪元素中选择正确的字体系列

Question

我现在对在CSS伪元素中使用图标感到困惑。字库有四种：Font Awesome 5 Free、Font Awesome 5 Solid、Font Awesome 5 Brands、Font Awesome 5 Regular

下面是HTML：

<h1>Hello</h1>

案例1

我使用这个图标：https://fontawesome.com/icons/twitter?style=brands

如你所见，它是一个字体图标，所以brands -family：Font Awesome 5 Brands

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f099"; /* TWITTER ICON */
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

它起作用了!

案例2

我使用这个图标：https://fontawesome.com/icons/phone?style=solid

如你所见，它是一个字体图标，所以solid -family：Font Awesome 5 Solid

h1:before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f095"; /* PHONE ICON */
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
}

不起作用！

我做错什么了？

我们如何知道何时使用正确的字体系列？

Answer 1

只需在同一个font-family中使用它们，浏览器就可以完成这项工作。如果它在第一个中找不到它，它将使用第二个。(Multiple fonts in Font-Family property?)

顺便说一句，正确的font-family是Free而不是Solid，因为Solid和Regular之间的区别是font-weight，并且两者具有相同的font-family。字体家族中没有 Solid和Regular，只有Free和Brands。

你可能还注意到，几乎所有Solid版本的图标都是免费的，但并非所有的regular版本都是免费的。其中一些包含在PRO包中。如果图标没有显示，则不一定是a font-family问题。

所有的Light和duotone版本都是PRO版本。

​

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands","Font Awesome 5 Free";
}

.icon1:before {
  content: "\f099";
  /* TWITTER ICON */
  font-weight: 400;
}

.icon2:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 900;
}

.icon3:before {
  content: "\f095";
  /* PHONE ICON */
  font-weight: 400;/*This one will not work because the regular version of the phone icon is in the Pro Package*/
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css" >

<div class="icon1 icon"></div>
<div class="icon2 icon"></div>
<br>

<div class="icon3 icon"></div>

​

​

​

参考：https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

与font-weight问题相关的问题：Font Awesome 5 on pseudo elements shows square instead of icon