编写一个够用的body默认样式
body {
font-family: 'Nunito', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
sans-serif;
font-weight: 400;
font-size: 13px;
// Fixme 用于覆盖extend文档站中的 font-synthesis: none; 在找到科学方案后建议删了
font-synthesis: weight style;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;
}
font-family
因为浏览器运行环境的多种多样，指定单个字体是不现实的。因此一般用font-family指定字体的集合，然后按照优先级去命中。需要注意的是中英文场景下，如果设计有指定英文字体，要先写英文样式，不然被中文字体先命中后，英文字体设置是不会生效的。’Nunito’是默认英文字体，’PingFang SC’（默认）和’Hiragino Sans GB’（回落）是苹果系中文字体，’Microsoft YaHei’，’微软雅黑’是默认Windows系字体，Arial是回落，最后sans-serif是兜底的关键字类字体。
font-weight
一个常见误区，font-weight的关键字lighter和bolder其实是和父级相比。normal等效400，bold等效700。mdn翻翻总有新惊喜。在window + 雅黑的情况下，从100到900其实只有三个区间。100-300细，400-500中等，600~900粗。
font-synthesis
浏览器有个内置机制，当字体不满足样式变形时，自己会自动渲染一个等价的字体。但是如果自己已经提供了相对应的字体，那就可以使用font-synthesis来关闭浏览器的模拟渲染。
杂项
两个font-smoothing，据说在苹果系平台下可以提升渲染质量，开就完事了。-webkit-tap-highlight-color是用来覆盖safari对可链接元素的一个提示行为颜色的。其实可以考虑去掉，个人更倾向于保留这个提示，让链接更显眼。
自定义@font-face
css中提供自定义字体的方式，最佳实践可以考虑直接抄袭Google font。
/* latin */
@font-face {
font-family: 'Nunito';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunito/v23/XRXX3I6Li01BKofIMNaDRs4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
在这里的属性就类似于注册信息。font-family告诉浏览器自定义字体叫什么名字，font-style是正常还是斜体（这里就开始和font-synthesis呼应上了）依此类推。font-display会控制加载自定义字体的超时机制。现在内部组件库中的字体资源加载有问题，因此是打成base64的，此时如值为swap当浏览器在开发模式默认清理缓存的时候会显得像失效了一样，所以改回了auto，试了下外链模式没这个问题。src中还有一个方法local会优先加载本地字体，类似有就不加载外链字体了。unicode-range是文字匹配范围，有些不常用的文字就可以删掉，比如越南语……保留拉丁就好。
自定义字体加载优先用外链加载！
浏览器会根据上面的各种注册信息命中外链资源，如果当前页面没用到也不会加载，如果转成base64一方面体积会变大，另一方面这种“按需加载”能力也就没有了。
