前言 一直以来对衬线字体都有一种迷之喜爱。
这也就是为什么我这次博客主题选用了这个主题paper ，但当我使用这个主题的时候发现，这个默认的字体就算他写了“Noto Serif SC”，在font-family里可是显示还是衬线字体。令我很苦恼，只好手动修改了。
什么是@font-face 首先，CSS3中出现了var变量，而@font-face本质上就是一个变量，一个定义字体或字体集的变量[1] @font-face 可以消除对用户电脑字体的依赖。[2]
@font-face {[ font-style: <font-style>; ]
@font-face {font-family : MyHelvetica;src : local ("Helvetica Neue Bold" ),local ("HelveticaNeue-Bold" ),url (MgOpenModernaBold.ttf);font-weight : bold;@font-face {font-family : "Bitstream Vera Serif Bold" ;src : url ("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf" );
以下是常用参数 介绍。
1.font-family 自定义font名字 ，可用引号，也可不用引号，但如果是以符号命名，建议加引号。
2.src 调用字体文件位置 ，可是本地文件，也可是线上地址。
3.font-style 设置字体类型 ，可选normal,italic,oblique。[3]
4.font-weight[4] 字重 ，可用数字也可用字符。
如果，你下载的字体有一套的话，可以相同的font-family名称，设置不同的font-weight。
Value
Common weight name
100
Thin (Hairline)
200
Extra Light (Ultra Light)
300
Light
400
Normal
500
Medium
600
Semi Bold (Demi Bold)
700
Bold
800
Extra Bold (Ultra Bold)
900
Black (Heavy)
5.unicode-range[1] 可以让特定的字符或者字符片段使用特定的字体。
@font-face {font-family : BASE;src : local ("Microsoft Yahei" );@font-face {font-family : quote;src : local ('SimSun' ); unicode-range : U+201 c, U+201 d;.font {font-family : quote, BASE;
如图，微软雅黑的引号：
修改后：
实际操作 (此处是我的实际操作，每个人情况不一样，可跳过不看)
1.下载字体 我将下载好的Noto Serif SC字体挑选后，在./themes/paper/source文件夹下新建了一个font文件夹，放在里面了。
2.配置 我在./themes/paper文件夹里，找到了对应设置字体变量的位置./themes/paper/source/css/var.styl，可以看出原主题作者是用stylus 写的。因为我之前没写过stylus，找了对应stylus文档[5]
@font-facefont-family Noto Serif SCfont-style normalfont-weight boldfont-family Noto Serif SCfont-style normalfont-weight normal$font -family = "Noto Serif SC" ,"SF Pro Text" ,"SF Pro Icons" ,"Helvetica Neue" ,"Helvetica" ,"Arial" ,sans-serif
Happy ending.
参考链接 [1] 真正了解CSS3背景下的@font face规则
[2] MDN–@font-face
[3] MDN–font-style
[4] MDN–font-weight
[5] stylus–@font-face
写文不易，如需转载，请注明出处。
如果某处写的有问题，欢迎留言，一起交流讨论，共同进步。
