UI库materialize.css的font-family设置解释

Posted 2021-04-09 一个小前端的学习笔记

但是真的当我想去了解的时候，啊，这么多知识的嘛，打扰了。我们就记住一点点基础的好了

无衬线字体 vs 衬线字体[1]

衬线体的笔画在开始和结束处有额外的修饰，并且笔画横竖粗细不一。这种装饰线的笔画设计多认为来源于古罗马纪念碑上的拉丁字母

非衬线体则是所有笔画粗细一致，并且在笔画的开始和结束处没有额外的修饰线条。在同等字号下，无衬线的字体看上去要比有衬线的更大，结构也更清晰，所以电子设备的屏幕上也偏好使用无衬线字体。

在中文字体界，两个有代表性的分类——宋体和黑体，分别对应着衬线字体和无衬线字体。

PS：查阅的过程中还了解到一个小知识[2]。chrome限制了最小字号12px，小于12px的字号显示为12px。但是我自己试了下，应该最小是 9px不知道是不是后来chrome修改了限制

还有一篇字体基础课[3]，看了就忘记的那种，有需要的读者可以自己去看

网页安全字体[4]

font-family属性应该包含多个字体名称供浏览器筛选，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持第一种字体，它会尝试下一种字体。从您想要的字体开始，以一般的字体结束，让浏览器在通用系列中选择类似的字体

materialize.css里面font-family为 $font-stack，其值为-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

我查了一下，有相关文章解释[5]，这种做法就是尽量去使用系统的字体库[6]。毕竟Windows，android，OS X，ios，Firefox OS和各种版本的Linux都拥有自己的（好的）系统UI字体。

Chrome和Safari 发布了 “system-ui”，这是一个通用字体系列，可用于代替$font-stack中的“-apple-system”和“BlinkMacSystemFont”。

这样你就可以通过font-family属性，对每一个元素进行这样子的字体定义。很不错的方法。缺点就是每次都要写这么一长串，非常麻烦

同样的，$font-stack里面的Oxygen Sans (for GNU+Linux 操作系统) and Cantarell (created for the GNOME 操作系统).

$font-stack 最后使用sans-serif;保底

PS: 此方法仅应用于font-family属性而不适用于font简写

PS: 我自己使用的前端css库是materialize.css，我之前还非常贴心的又引入了normalize.css，后来我发现materialize.css已经引入了normalize.css v7.0.0。真的是画蛇添足，写代码不过脑子

References

[1] 无衬线字体 vs 衬线字体: https://www.chrafz.com/3250.html
[2] 小知识: https://www.zhihu.com/question/60211703
[3] 字体基础课: https://cdc.tencent.com/2015/07/20/%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84%E5%AD%97%E4%BD%93%E8%AF%BE%EF%BC%88%E4%B8%80%EF%BC%89-%E8%8B%B1%E6%96%87%E5%AD%97%E4%BD%93%E5%9F%BA%E7%A1%80/
[4] 网页安全字体: https://www.w3schools.com/cssref/css_websafe_fonts.asp
[5] 相关文章解释: https://css-tricks.com/snippets/css/system-font-stack/
[6] 使用系统的字体库: https://wptavern.com/wordpress-4-6-to-drop-open-sans-in-the-admin-in-favor-of-system-fonts