html页面字体调节语言,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";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";