HTML CSS 字体列表顺序

为了实现在苹果电脑中显示苹方字体,在 windows 里显示微软雅黑,我给前端的全局字体顺序通常是这样的:

font-family: "Pingfang SC", "Hiragino Sans GB", "Helvetica", "Droid Sans", "Microsoft YaHei", "Arial", "sans-serif";

Pingfang SC:macOS 和 iOS 系统系统字体,最先显示该字体;

Hiragino Sans GB:苹方出来之前苹果系统的早期字体,考虑低版本系统中没有苹方字体的情况;

Helvetica:苹果系统中的英文字体;

Droid Sans:安卓系统默认中文字体(并不是网传的思源黑体哦), 与 Droid Sans Fallback 的区别是,Droid Sans Fallback 除了中文还兼容了日文、韩文;

Microsoft Yahei:Windows 系统字体;

Arial:苹果和 windows 系统中都有的无衬线英文字体;

Sans-serif:无衬线字体(字体的种类非字体),当前面所有字体都缺失时系统自动选用该类字体中的一种。

优美华丽的博客字体族(font-family)Web Page 字体

主要为代码的博客:

body{
	font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
}

英文和中文的博客:

body{
	font-family:'Lucida Grande','Helvetica Neue',Helvetica,Arial,Verdana,'PingFang SC','Hiragino Sans GB',STHeiti,'Microsoft YaHei','WenQuanYi Micro Hei','WenQuanYi Micro Hei Mono','WenQuanYi Zen Hei','WenQuanYi Zen Hei Mono','Noto Sans CJK SC','Source Han Sans CN',SimSun,sans-serif;
}

中文和代码的博客:

body{
	font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono','Lucida Grande','Helvetica Neue',Helvetica,Arial,Verdana,'PingFang SC','Hiragino Sans GB',STHeiti,'Microsoft YaHei','WenQuanYi Micro Hei','WenQuanYi Micro Hei Mono','WenQuanYi Zen Hei','WenQuanYi Zen Hei Mono','Noto Sans CJK SC','Source Han Sans CN',SimSun,sans-serif;
}

何星星在用的字体:

body,button,input,select,textarea{
	font-family:-apple-system,BlinkMacSystemFont,Consolas,"Ubuntu Mono",Monaco,Menlo,"Andale Mono","Liberation Mono",Courier,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei","Xingkai SC", STXingkai,"Noto Sans CJK SC","Source Han Sans CN",SimSun,sans-serif;
}