Font Awesome 5同一种字体是如何对应不同的字体文件
Font Awesome 是一种网页中使用的矢量字体图标解决方案，得益于 CSS3 中的 CSS Fonts Module Level 3 特性支持。
font5 给图标增加了分类，分为 solid 和 regular，即同一个图标可能会有两种样式。此时打开控制面板查看两个元素的 css，可以发现使用的字体和内容编码一模一样。
那么问题来了，为什么图标会不一样呢？
事出必有因
我们首先打开引入这两种图标的 css 的源码看看
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* 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 上很多人都提出有这个限制，可能是旧浏览器的行为，需要注意一下兼容性。
