在 Font Awesome 中是否可以使用 CSS 内容属性在“far”和“fas”数据前缀之间切换？

Question

1. 我正在使用 CSS 内容属性，因为它的加载速度比标签快。
   
2. “fa-user”图标类有两组图标，即“far”和“fas”，但它们共享相同的Unicode“\f007”。这是个问题。
   
3. 获得的结果只有一个缺点。图标在页面加载几秒钟后加载。因此，它与用户体验混乱。
   
4. 使用标签加起来就是带注释的 HTML 标记。
   

那么，有没有办法我仍然可以使用 CSS 内容属性并在"far"和"fas"类之间切换？

有什么建议可以解决这个问题吗？

Answer 1

图标的fas和之间的区别在于，要在两者之间切换，您只需调整：farfont-weightfont-weight

.icon {
    font-family:"Font Awesome\ 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.icon:before {
  content:"\f007";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<span class="icon" style="font-weight:300"></span>
<span class="icon" style="font-weight:900"></span>

这是另一个相关问题：当直接在 CSS 中使用时，Font Awesome 显示正方形而不是图标