问题描述
项目中使用reset清除原本默认的ccs，同时设置了默认的字体，但是chrome 和 safari 浏览器字体显示结果不同。 猜测：这是因为font-family的渲染顺序导致的。
font-family
CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。
通常会使用属性缩写 font 来设置 font-size 和其他与字体相关的属性。
应当至少在使用的 font-family 列表中添加一个通用的字体族名，因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用 @font-face 提供的字体移动能够正确地下载。提供通用的字体族使得浏览器可以在无法得到最佳字体的情况下使用一个相对接近的备选字体。
font-family 属性指定的是一个优先级从高到低的可选字体列表。
渲染顺序
字体的选定不是在发现用户计算机上安装的列表中的第一个字体时停止。相反，对字体的选择是逐字进行的。也就是说即使某个字符周围都在某个字体中可以显示，但该字符在当前的字体文件中没有适合的图形，那么会继续尝试列表中靠后的字体。
（不过这在 Internet Explorer 6 以及之前的版本的 IE 浏览器中不适用。）当一个字体只在某些特定的 font-style (en-US)、 font-variant (en-US)、或 font-size (en-US) 属性值下有效时，这些属性的值也可能对字体族 font family 的选择造成影响。
属性值内容
font-family =
[ <family-name> | <generic-family> ]
- family-name
一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族名。字体族名可以包含空格，但包含空格时应该用引号。
- generic-name
通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。在列表的末尾应该至少有一个通用字体族名。以下是该属性可能的取值以及他们的定义。
字体族名或者是引号包括的字符串，或者是不含引号的一个或多个合法标识串构成的。这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。
-
serif -
带衬线字体，笔画结尾有特殊的装饰线或衬线。例如：Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
-
sans-serif -
无衬线字体，即笔画结尾是平滑的字体。例如， "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
-
monospace -
等宽字体，即字体中每个字宽度相同。例如， "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
-
cursive -
草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。因为一般这种字体都有一点连笔效果，所以会给人一种手写的感觉。例如，"Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
-
fantasy -
Fantasy 字体主要是那些具有特殊艺术效果的字体。例如，Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
-
system-ui -
从浏览器所处平台处获取的默认用户界面字体。由于世界各地的排版习惯之间有很大的差异，这个通用选项 is provided for typefaces that don't map cleanly into the other generics.
-
math -
针对显示数学相关字符的特殊样式问题而设计的字体：支持上标和下标、跨行括号、嵌套表达式和具有不同含义的 double struck glyphs。
-
emoji -
专门用于呈现 Emoji 表情符号的字体。
-
fangsong -
一种汉字字体，介于宋体和楷体之间。这种字体常用于某些政府文件。
然后我发现 safari上的字体就是用的字体族名，所以可能是safari在渲染的时候，某种字体用不了前面的备选字体，所以用了字体族名，而chrome可以用该字体，因此，两个浏览器上同样的代码，但字体却不一样。
解决方式
修改font-family，用了项目里其他地方用过的一个字体顺序。
refer:
