如何为衬线字体设置 css 系统字体

How to set css system fonts for serif'd fonts

https://css-tricks.com/snippets/css/system-font-stack/ 发现这个很棒的 link 关于如何利用系统字体。此示例仅显示无衬线字体:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

问题:上面代码段的匹配衬线版本是什么?

操作系统一般不使用那样的衬线字体,除非用户明确设置,所以-apple-system不会有衬线版本,但你可以只使用serif(没有您列出的其他字体)以使用浏览器的默认衬线字体。