说起在网页中引入字体文件，首先不得不提一个大多数前端至少用过或者听过的库Font Awesome。使用过这个库的都知道，只要引入一个 css 文件，然后通过给元素赋予指定的类，就可以展示出一个对应的图标，而且这个图标能使用 css 样式控制其表现，比传统的使用图片作为图标好太多了。

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

发现疑问

今天无意发现 Font Awesome 更新了，升级到 5.x 了之后多了一种 svg with js 的使用方式，尝试了下和 Element-ui 结合使用，发现这条路子行不通（因为使用这种方式的时候 font awesome 会把图标元素的载体元素转换成 svg 标签，从到导致了没法动态改变图标的问题，如果没有动态改变图标的需求可以使用这种方式）。

基于以上原因，所以还是使用引入 css 的老方法。然鹅，font5 给图标增加了分类，分为 solid 和 regular，即同一个图标可能会有两种样式，如下：

height="166" scrolling="no" title="dJYdxZ" src="//codepen.io/Yuliang-Lee/embed/dJYdxZ/?height=166&theme-id=dark&default-tab=result&embed-version=2" allowfullscreen="true">See the Pen <a href="https://codepen.io/Yuliang-Lee/pen/dJYdxZ/">dJYdxZ</a> by xlaoyu (<a href="https://codepen.io/Yuliang-Lee">@Yuliang-Lee</a>) on <a href="https://codepen.io">CodePen</a>.


此时打开控制面板查看两个元素的 css，可以惊讶的发现使用的字体和内容编码一模一样

dom-css-content

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

事出必有因

我们首先打开引入这两种图标的 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‘。

google 之后在 StackOverflow 找到了一个相关的问答（Stack Overflow 大法好）。How to use font-family with same name?

咳咳。。敲黑板，划重点

When you describe a font with a name, imagine (in the most abstract of the explanations) that you create an object; but, when you create multiple font-rules with the same name, imagine you create an array. Now, to access and array, you have to use its index. The index here is the font-weight. So, to access different weights (technically, fonts), you use the weight. Continuing the analogy of the array above, you have to manually define the index, it’s not automatically done.

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

不能听风就是雨

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

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

font-weight
font-style
font-stretch

These descriptors define the characteristics of a font face and are used in the process of matching styles to specific faces. For a font family defined with several @font-face rules, user agents can either download all faces in the family or use these descriptors to selectively download font faces that match actual styles used in document. The values for these descriptors are the same as those for the corresponding font properties except that relative keywords are not allowed, ‘bolder’ and ‘lighter’. If these descriptors are omitted, initial values are assumed.

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

可以使用 @font-face 引入外部字字体
使用 @font-face 引入相同名字的字体，可以通过设置 font-weight、font-style、font-stretch 属性控制浏览器根据使用样式命中不同的字体文件
~~font-weight 设置为 normal 的定义必须放在最前面~~，经过在 chrome 上测试，并没有这个要求。但是在 Stack Overflow 上很多人都提出有这个限制，可能是旧浏览器的行为，需要注意一下兼容性。

参考连接

How to use font-family with same name?
How to add multiple font files for the same font?
Style Linking
CSS Fonts Module Level 3
element2-fontawesome5

看看同一种字体是如何对应不同的字体文件的相关推荐

字体外面怎么加边框_字体处理的6种方法，解决ppt种字体不突出的问题
制作ppt过程中,我们经常碰到字体不够突出的问题.今天采采解锁了6种方法,学会这6种方法,以后再也不担心不会处理ppt中的字了. 一,使用蒙版我们有时候会碰到图片上增加字体的情况.而字体无论采用哪种 ...
cad字体草体_50种免费的草书和手写字体，丰富您的设计
为您的设计找到理想的书法字体是一项艰巨的任务. 草书字体有很多用途,最好与简单的正文字体搭配使用以达到平衡. 合理地使用它们是因为使用粗体草书字体可以轻松胜过您的设计. 在这个集合中,我们为您的未来项 ...
潦草字体在线识别_小学生“狂草”字体走红，字迹凌乱老师认不出，网友：谁翻译一下...
对于一些小学生来说,每天最不喜欢做的事情就是写作业了,一是因为写作业的时候会耽误玩耍的时间,二是因为写作业的时候容易被父母"男女混合双打". 但是就算再不喜欢,作为学生也不能脱离写 ...
linux下字体怎么安装方法,linux安装字体方法
1.查看系统中文字体 #fc-list :lang=zh 2.如果提示commont not fount 说明为安装fontconfig 3.安装fontconfig #yum -y install ...
怎样更换UC浏览器的字体？更换UC浏览器的字体的方法
uc浏览器是一个非常好用的搜索服务软件,需要使用浏览器的用户可以使用手机在这里操作,用户在使用一个软件的时候,可以将这个浏览器设置成自己喜欢的字体,这样使用起来就会更加的方便,在阅读的时候,使用顺眼的 ...
微信小程序可以加服务器上的字体,微信小程序中自定义字体
微信小程序支持自定义字体开放出来也有段时间,这边整理下使用自定义字体中,容易忽略的一些问题,和简便的全局自定义方式.如果是同时加载两种字体包,先下载下来的会被后下载下来的字体包给覆盖. 官网接口文档 ...
centos7默认字体_CentOS7终端的分辨率和字体修改
本文转贴自https://blog.csdn.net/u010566813/article/details/40502819 一.修改分辨率修改/boot/grub2/grub.cfg 添加如上,具 ...
android 怎么获取app 字体颜色,Android APP使用自定义字体实现方法
android系统内置字体 android 系统本身内置了一些字体,可以在程序中使用,并且支持在xml配置textView的时候进行修改字体的样式.支持字段为android:textStyle ,an ...
droid sans字体_2019年免费可商用字体大全（附打包下载）
私信"字体"可免费获得. 附送一个几十G的,有商业授权要求的字体包! 不说那么复杂了,简单讲,可能你下载的大多数字体都是收费的.比如方正.文鼎.汉仪等的90%以上需要商业授权,甚至 ...
cad缺失字体补全工具_CAD图纸字体不全怎么办？只要修改字体映射表就可以轻松解决了...
原创:就说我在开发区趣说CAD,让枯燥生动起来. 导读:字体映射表是CAD的配置文件之一,随程序启动加载,通过修改其内容,可以对缺少的字体进行替代,解决字体缺失的困扰.今天将从字体缺失现象入手,分析 ...

看看同一种字体是如何对应不同的字体文件的

发现疑问

事出必有因

不能听风就是雨

参考连接

看看同一种字体是如何对应不同的字体文件的相关推荐

最新文章

热门文章