首页 ›  文章

国际化站点的字体设置

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

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

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:从浏览器所处平台处获取的默认用户界面字体
原文链接:segmentfault.com

上一篇:React setState 这样用,开发直呼内行!
下一篇:Rax PWA - 快速升级 Web 体验
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入