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

我目前对在CSS伪元素中使用图标感到困惑。fontawesome有4种字体系列：

font Awesome 5 Free

，

font Awesome 5 Solid

，

font Awesome 5 Brands

，

font Awesome 5 Regular

以下是HTML：

<h1>Hello</h1>

它起作用了

案例2 我使用这个图标：

正如您所看到的，它是一个

solid

图标，因此字体系列：

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;
}

不行

我做错了什么

---

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

只需在相同的

字体系列中使用所有字体，浏览器就会完成这项工作。如果在第一个文件中找不到，它将使用第二个文件。（）

顺便说一句，正确的
font-family
是
Free
而不是
Solid
，因为Solid和Regular之间的区别在于
font-weight
，两者都具有相同的
font-family
字体系列中没有
固体
和
常规
，只有
免费
和
品牌

您可能还注意到，几乎所有的
实体版
图标都是免费的，但并非所有的
常规版
图标都是免费的。其中一些包含在PRO软件包中。如果图标未显示，则不必出现
字体系列问题

所有的
Light
和
duotone
版本都是专业版


。图标{
显示：内联块；
字体风格：普通；
字体变体：正常；
文本呈现：自动；
-webkit字体平滑：抗锯齿；
字体系列：“字体酷炫5品牌”，“字体酷炫5免费”；
}
.icon1：之前{
内容：“\f099”；
/*推特图标*/
字体大小：400；
}
.icon2：之前{
内容：“\f095”；
/*手机图标*/
字号：900；
}
.icon3：之前{
内容：“\f095”；
/*手机图标*/
font-weight:400；/*此图标不起作用，因为手机图标的常规版本在Pro软件包中*/
}



如果有疑问，请查看下载的
fa phone
css类的fontawesome.css文件。你说得对。。尤其是在第5版中，字体重量是必需的，所以我认为使用“免费”就足够了（这还不够，但必须强制执行）没有
常规
或
实体
字体系列。。。只有
免费
和
品牌
。这似乎只适用于通过Web字体和CSS方法（
链接
标记）而不是SVG和JS框架（
脚本
标记）加载的情况。@Todd使用JS版本也可以，但需要进行更多操作。这里有一个例子：谢谢你刚刚救了我：）顺便说一句，5队应该知道这一点
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;
}