Font Awesome 是一种网页中使用的矢量字体图标解决方案，得益于 CSS3 中的 CSS Fonts Module Level 3 特性支持。

font5 给图标增加了分类，分为 solid 和 regular，即同一个图标可能会有两种样式。此时打开控制面板查看两个元素的 css，可以发现使用的字体和内容编码一模一样。

那么问题来了，为什么图标会不一样呢？

事出必有因

我们首先打开引入这两种图标的 css 的源码看看

/* regular.css */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
}
/* solid.css */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  }

可以看出 font-face 中的 font-family 确实一模一样，即可以表示当有元素使用到这个字体的时候，浏览器有能力识别出需要用的是哪个'font'。

如果出现了同样的字体，就是用 font-weight 这个属性来判断要用哪一个！这时候再回头去看上面的 font awesome的css 定义，可以看出确实两个字体使用了不同的 font-weight 。一切都'水落石出'了。

不能听风就是雨

虽然上面回答说得很有道理，并且也符合我们观察到的现象，但是我们不能听风就是雨是不？！下定论要有证据！既然别人能说出来，必然我们能找到对应这块的规范标准。

果不其然，在另外一个问答中看到，font-weight 和 font-style 属性都可以影响字体选择行为，并且出现了引领我们走向'真理'的评论：CSS Fonts Module。作为描述字体的属性有三个

●font-weight

●font-style

●font-stretch

目前为止可以总结出几点：

1.可以使用 @font-face 引入外部字字体

2.使用 @font-face 引入相同名字的字体，可以通过设置 font-weight、font-style、font-stretch 属性控制浏览器根据使用样式命中不同的字体文件

3.font-weight 设置为 normal 的定义必须放在最前面，经过在 chrome 上测试，并没有这个要求。但是在 Stack Overflow 上很多人都提出有这个限制，可能是旧浏览器的行为，需要注意一下兼容性。