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

2021-03-24 18:09 阅读

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

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)

QQ咨询
电话
微信
微信扫码咨询