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

Posted 2023-03-15

【中文标题】Font Awesome 5 在伪元素中选择正确的字体系列

【英文标题】：Font Awesome 5 Choosing the correct font-family in pseudo-elements

【发布时间】：2018-11-13 18:20:24

【问题描述】：

我目前对在 CSS 伪元素中使用图标感到困惑。 fontawesome 有 4 种字体系列：Font Awesome 5 Free、Font Awesome 5 Solid、Font Awesome 5 Brands、Font Awesome 5 Regular

这里是 html：

<h1>Hello</h1>

案例一

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

如您所见，它是一个 brands 图标，所以 font-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 图标，所以 font-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;

不工作！

我做错了什么？

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

【问题讨论】：

如有疑问，请查看您下载的 fa-phone css 类的 fontawesome.css 文件。

【参考方案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 包中。如果图标未显示不一定是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

【讨论】：

你说得对.. 特别是在第 5 版中 font-weight 是必要的，所以我认为使用“免费”就足够了

@לבנימלכה 这还不够，而是强制性的；）没有regular 或solid font-family ...只有Free 和Brand。

这似乎只在您通过 Web 字体和 CSS 方法（link 标签）而不是 SVG 和 JS 框架（script 标签）加载时才有效。

@Todd 对于 JS 版本它也可以工作，但您需要进行更多操作。这是一个例子：***.com/questions/48753688/…

谢谢你救了我 :) 顺便说一句，fontawesome 5 团队应该知道