国际化站点的字体设置

开发支持多语言的网站时，在页面排版的过程中，总会遇到中英文交错的情况，或者考虑使用场景，会包括中文系统显示英文页面的情况，

这时候的界面字体如何设置呢？

MDN定义如下：
CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体

用法
属性值用逗号隔开，浏览器会选择列表中第一个该计算机上安装的字体，或者通过@font-face指定的可直接下载的字体

考虑到在中文的字体中通常会包括英文字母，如果想要对英文使用特定的字体，那就需要把英文字体的字体族名写在最前面，这样，浏览器就会优先选用英文字体，当遇到中文时，发现英文字体不支持，就会继续查找后面的字体族名，执导发现中文字体。

示例

@font-face {
    font-family: Roboto-Regular;
    src: url(8f793587dcf03f31c551c5b60d175fc2.ttf)
}

@font-face {
    font-family: Titillium-Regular;
    src: url(4f5848e6a415f5a4964a272d8b633164.ttf)
}

@font-face {
    font-family: Titillium-Semibold;
    src: url(600f2d0861eeddb39f0d8b0ff13ef59c.ttf)
}
/**以上三种都是英文字体**/
body{
    font-family:Roboto-Regular,Microsoft Yahei,PingFang SC
}

注意
一般来说，需要在列表的末尾指定一个通用字体族名（一种备选机制，用于在指定的字体不可用时给出较好的字体）
常用取值如下

• serif : 带衬线字体，笔画结尾有特殊的装饰线或衬线
• sans-serif : 无衬线字体，笔画结尾是平滑的字体
• monospace：等宽字体，即字体中的每个字宽度相同
• cursive：草书字体，带有连笔效果的类手写字体
• fantasy:具有特殊艺术效果的字体
• system-ui:从浏览器所处平台处获取的默认用户界面字体