HTML页面中文字体(font-family)的CSS设置

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

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";

本文主要参考：如何优雅的选择字体(font-family)