Font-face是css3中的一个模块,它主要把自定义字体嵌入到你的网页中,@font-face 可以消除对用户电脑字体的依赖。用的比较多的场景就是用来生成自定义字符小图标,但font-face能做到的远不至于此!
语法
首先我们一起来看看@font-face的语法规则:
1 | @font-face { |
属性 | 值 |
---|---|
font-family | 自定义的字体名称 |
src | source:自定义的字体的存放路径 format: 自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型: truetype,opentype,woff,svg等 |
font-weight | 字重 |
font-style | 字体样式 normal italic oblique |
关于src
src表示调用字体文件,可以是本地字体文件(IE9+支持),也可以是线上地址(可能有跨域限制)。
1. 字体文件名简写
现在很多网站会使用“微软雅黑”字体,但是,“微软雅黑”的名称有点长:1
2
3.font {
font-family: 'Microsoft Yahei';
}
此时我们就可以利用@font face规则简化,这样就容易记忆了,书写更快了:1
2
3
4@font-face {
font-family: YH;
src: local("Microsoft Yahei");
}
使用的时候直接:1
2
3.font {
font-family: YH;
}
2. 更完美的用户体验
一些特殊的标题设计师就是喜欢用“方正粗雅宋”这个字体(已经购得版权),但是很显然,这么帅气的字体,几乎很少有用户安装的,所以实际开发的时候,全都是通过工具而生成一个全新的精简版的“方正粗雅宋”字体文件,再通过src属性url()方法外链这个字体文件。
很棒的方案,但还不够完美,为什么呢?虽然安装“方正粗雅宋”这个字体的用户并不多,但并不表示没有用户使用之。试想一下,假如有用户安装了这个字体,结果你在网页呈现的时候,还要再去外链一个额外的文件地址,岂不是白白的浪费?既浪费流量,体验又不一定好,如果字体文件加载慢,会看到文字“变形”的过程,显然是不友好的。
我们可以借助@font face规则中的local实现代码和体验上的进一步的提升,如下:1
2
3
4
5
6
7@font-face {
font-family: FZCYS;
src: local("FZYaSongS-B-GB"),
url("FZCYS.woff2"),
url("FZCYS.woff"),
url("FZCYS.ttf");
}
于是乎,那些安装了“方正粗雅宋”这个字体的用户,就没有任何字体文件请求。加载更快了,用户体验上升了,还省了流量,如此百益无一害的事情,还不妥妥的用起来。
应用
1. 远端加载css字体。
有时候我们需要的字体是根据用户输入来决定加载的字体,那么,我们肯定是不希望加载所有文字的字体文件,而只是用户用到的字体。这个时候我们需要监控用户输入,在用户输入之后去调用api来生成一段字体的代码,然后把这段代码注入到页面中。让字体效果得以显示。
1 | @font-face { |
这里source用的是base64处理过后的一个字体文件,它也可以是服务端生成的一个字体文件路径。
2. js控制字体引入
在上面的案例中,通过向页面插入style节点,可以对dom中的文字生效,但canvas中的文字是不生效的,下面有另外一种方式,通过js的document.fonts来加载字体可以解决这个问题。
1 | const fontFamily = 'FZZZHONGJW--GB1-0' |
关于更多document.fons,可以参考这里 https://googlechrome.github.io/samples/font-face-set/