[ font-family: <family-name> ] ||
[ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]# ] ||
[ unicode-range: <urange># ] ||
[ font-variant: <font-variant> ] ||
[ font-feature-settings: normal | <feature-tag-value># ] ||
[ font-variation-settings: normal | [ <string> <number>] # ||
[ font-stretch: <font-stretch> ] ||
[ font-weight: <weight> ] ||
[ font-style: <style> ]
}
<family-name>就是家族体系名称，例如sans-serif无衬线字体。
取值font-family 这里指定的字体名字将会被用于font或font-family属性，在元素的使用字体的字体名称就是这里设定的。
src 远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( 例如src: local('Arial'))。 如果找不到该字体，将会尝试其他来源，直到找到它。
font-variant 字态
font-stretch 字体描边.
font-weight 字重
font-style 对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。
unicode-range在该@font-face中定义的unicode字体范围
例子：用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：
@font-face {font-family: MyHelvetica
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf)
font-weight: bold
}
在网上下载好字体包在static下新建文件夹，名字自定义，用来存放字体包
在新建好的文件夹下新建一个css文件，同样名称自定义
在这里插入图片描述
检查自己的 webpack.base.conf.js 文件，是否有如下代码，没有需要自己写上
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
打开刚才新建的 css 文件
@font-face{
font-family: '思源黑体'
src: url('../siyuan/SourceHanSansCN-Normal-2.otf')
font-weight: normal
font-style: normal
}
接着在main.js文件中引入css文件
import '../static/siyuan/font.css'
在需要设置该字体的位置写font-family:'思源黑体' 就可以了
这其实是一个规避异常情况写法，因为浏览器默认会首先检测用户的系统字体是否有和 @font-face 声明的字体同名的字体，如果有就是优先使用系统字体，由于 @font-face 通常是开发者自定义生成的字体，可能和系统字体有差异，所以可以使用 src: local('☺') 来规避，因为 OpenType 协议规定字体名字中含有双字节 unicode 字符会被视作非法，所以这个笑脸就是用来让浏览器不匹配到任何系统字体，从而规避 @font-face 字体可能和系统字体重名而造成的问题
