网页设计中的字体设置

不同操作系统、不同浏览器下的默认字体是不同的，在网页项目中可以通过 CSS 的 font-family 和 @font-face 来让页面渲染出适合当前网页的字体。

除了特定设置，正确的字体引用会避免两种字形同时出现：

1. 字体的 fallback 机制

在 CSS 中，可以通过 font-family 引用多种系列、多种字体，并且可以对字体先后顺序进行设置。

当用户打开一个网页的时候，浏览就会读取 font-family 第一个引用的字体，并去检索用户当前操作系统下的字体，如有就显示，如没有就检索下一个，以此类推。

若浏览器找不到指定的字体，或者没有设置 font-family 则会 fallback 到浏览器的默认字体。

2. 字体的先后顺序设置

由于中文字体内都包含西文字体，如想优先显示效果较好的西文字体，需要将西文字体写在中文字体的前面。

虽然用户群体中使用 Windows 系统较多，但 Mac 用户大部分会下载 Office，所以会存在许多 Windows 下常见的字体，比如微软雅黑。将 macOS 系统的字体写在 Windows 的前面，可以保证在对应平台显示更好的效果。