只会导致减速的设置
为了网页让网页更好看，除了采用CSS、JS之类的手段之外，对于网页采用何种字体，也是需要考量的问题。咕咕了一个月
字体选择
由于浏览器和平台种类繁多，为了可以更好的显示字体，font-family很早就引入了字族的属性，可以通过设置”serif”、”sans-serif”、”cursive”等字族来尽可能匹配计算机本地自带字体。这种方法对西方语系的字母有较好的效果，但是由于汉语字体结构本身的复杂，往往不能达到最佳的显示效果。都是垃圾微软的错不过这个问题在Google和Adobe在2014年联合发布了他们共同合作的免费开源的「泛中日韩字体」思源字体之后得到了较好的解决，关于这个开源字体的介绍请参看 关于思源宋体的问答。
引入思源字体
由于思源字体版本的繁多，在引入的时候需要加以考量，我个人选择采用CJK SC系列的字体（即中文字形优先）。
但是很多用户在个人电脑当中并不会主动安装额外的字体，为了保证显示效果，我们需要使用字体托管服务的网站。而Adobe Typekit提供了全套的思源字体托管服务，使用的CDN为Akamai。免费版只能为一个网站提供服务，每个月页面访问数上限为25000，但是当你的页面访问数超过限制时，Typekit并不会终止对你的服务，只有在你多次超过限制后会要求你更换为付费计划。
使用自己的账号登陆之后，点击右上角的的Creat new kit创建一个新的kit。
在Kit添加Source Han Sans Simplified Chinese，当然你也可以选择其它你想要使用的字体，然后点击ADD TO KIT，注意不要添加太多的字体，否则会造成kit过大。思源系列字体中文字体的字重及其丰富，支持从100-900的字重，可以自己选择性添加。虽然全部添加Base Kit Size也只有42K。对于CSS Stack选项我们需要设置一个在用户的浏览器不支持的情况下Typekit应该返回的字体名称，默认字体为sans-serif。
OpenType Fearures选项可以启用一些字体特性，但是如果不清楚这些特性的支持程度则请保持默认设置。而Vertical Features属性在Unicode 10.0.0于2017.06.20正式发布以后有了完整的规范，如果你选择的字体支持此属性，请将其开启，因为这会使文字在竖排显示时有更好的效果，关于竖排支持的详细内容可以查看UAX #50文档。
然后在优先加载的<head>标签内添加Adobe提供的JavaScript脚本，注意选择脚本时应该选择异步加载脚本以提高效率。选择异步加载脚本后，你需要对CSS进行修改，可以参考如下的CSS写法:
1
2
3
#title {
font-family:'Noto', 'Noto Sans CJK SC', 'Noto Sans CJK', 'Source Han Sans', source-han-sans-simplified-c, sans-serif;
}
需要注意的是思源字体当中已经内置了Adobe Source Sans Pro西文字体，并针对CJK进行了优化（与思源黑体一样具备7个字重），无需单独设置字族。
点击Using weights & styles in your CSS可以查看对应字体的字重和字体样式，如果需要支持较老版本的浏览器，你需要勾选Show variation-specific font-family names，因为有的浏览器无法使用较新的CSS属性，所以适用性更广的CSS写法应该是：
1
2
3
4
5
#title {
font-family: "source-han-sans-simplified-c-n7","source-han-sans-simplified-c" , sans-serif;
font-style: normal;
font-weight: 700;
}
variation-specific font-family names所接的数字与字重相对应，而且其应该排在普通字族名称之前。如果是版本较新的浏览器会自动跳过variation-specific font-family names，使用普通字族。
在完成了全部设置以后，点击Publish进行发布使kit生效。在你每一次对kit做出修改之后你都需要重新发布一次，以此来保证更改生效。
结语
由于中文字体过大的原因，采用本方法时需多加注意，如果有较大访问量建议优先使用系统自带的字体。
坐等最新版本Win10的新系统默认字体。
本文采用CC BY-NC-ND 4.0许可协议进行许可，转载请注明出处。
本文最后更新时间为：2019-02-03-Sunday-03:22:20 PM
