Font Awesome 5同一种字体是如何对应不同的字体文件

KuaiKan 2020-10-11 154

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-weightfont-style 属性都可以影响字体选择行为,并且出现了引领我们走向'真理'的评论:CSS Fonts Module。作为描述字体的属性有三个

●font-weight

●font-style

●font-stretch

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

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

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

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

签名:这个人很懒,什么也没有留下!
最新回复 (0)
返回