怎样保证多种操作系统上浏览器中字体的美观

2021年8月25日 | 分类: 【技术】

参考：https://www.zhihu.com/question/20211922
参考：https://www.jspxcms.com/knowledge/537.html
参考：https://segmentfault.com/a/1190000006110417

英文字体较为简单统一，容易设置。而且英文字母少，即使重新定义一个字体体积也不大。中文则完全依赖操作系统的字体，不同操作系统的拥有的字体各不相同，设置起来稍显复杂。设置不当的话，会导致某些操作系统下显示效果不佳。

Windows

中文字体：微软雅黑（”Microsoft Yahei”）宋体（SimSun）。微软雅黑（”Microsoft Yahei”）为最佳选择。

英文字体：”Segoe UI”

经典组合：微软雅黑（”Microsoft Yahei”） “Segoe UI”

另：宋体使用”\5b8b\4f53″兼容性较好。因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。

Mac OS

中文字体：

OS X 10.6 之前：华文黑体（STHeiti）华文细黑（STXihei）
OS X 10.6 之后：黑体-简（Heiti SC）
冬青黑体（ Hiragino Sans GB ）
苹方（PingFang SC）：全新中文字体

英文字体：

Helvetica Helvetica Neue
San Francisco：全新英文字体

经典组合：苹方（PingFang SC） San Francisco

Android

中文字体：Droid Sans Fallback为默认的中文字体，所以无需为Android专门设置中文字体。
iOS

与 Mac OS 一致。

Linux

中文字体：文泉驿微米黑”WenQuanYi Micro Hei”

中文字体设置

Mac电脑也可能装word，从而拥有微软雅黑字体，所以应该以Mac自身的字体优先。顺序是Mac、Windows、Linux。大致是哪种字体好看就先定义那种字体。

font-family: "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";

英文字体设置

参考Bootstrap4的设置：

font-family:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  // 如果前面定义的字体都找不到，则使用系统中的默认的非衬线字体。因为非衬线字体通常比衬线字体好看。
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

参考modern-normalize：

font-family:
    system-ui,
    -apple-system, /* Firefox supports this but not yet `system-ui` */
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';

参考tailwindcss：

font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

中英文字体设置

字体定义的规则是，前面的字体找不到，则由后面的字体代替。由于中文字体中也带有英文字体，且通常比较难看，所以应该先定义英文字体。中英文字体一起的设置如下：

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Helvetica Neue", Helvetica, Tahoma, Arial,"PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

或

font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";