网站预设字体CSS的最佳写法：无衬线体好过衬线体

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

字体

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

从用户体验角度来讲，段落文本阅读体验最好的是黑体（无衬线体），而非宋体（衬线体），Win7的时候，字体默认的宋体，而从Windows 10开始，浏览器默认字体改成微软雅黑了，而 Mac OS 默认也是黑体而非宋体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

推荐字体：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

Windows：MicroSoft YaHei（微软雅黑）
Mac OS：PingFang SC（苹方）或 Hiragino Sans GB（冬青黑体）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

body{
	fomt-family: Hiragino Sans GB, MicroSoft YaHei;
}

注：个人喜欢把苹方作为文章标题字体（20PX以上），而冬青黑体作为段落字体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

字体颜色 Color

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

大部网页背景颜色是使用白色，所以字体应该是使用黑色较为友好，当不建议使用纯黑（#000），这是因为纯白底与纯黑的对比太过于强烈，可以使用灰一点的黑色，比如#333，这样能减轻用户视觉负担。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

推荐字体颜色：#333文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

body{
	color:#333;
}

字体 Font-Size

由于现在的电脑屏都是宽屏，手机的屏幕更是高清屏，所以字体大小建议采用16PX字号会比较适合阅读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

推荐字体szie：16px文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

body{
	font-size:16px;
}

字体行距 Line-Height

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

字体行距对于阅读也有有很大的影响，比较选中太小，对于多行文字的时候，容易在阅读时「串行」，所以字体的选中个人建议是字体的1.5 – 2.0倍之间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

推荐行距：1.75EM文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

body{
	line-height:1.75; 
}

这里后面我没有加入 em，是因为CSS默认就是 em 为单位，所以 em 可以省略不写文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

最佳 CSS 写法

body {
  /*  字体  */
  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  
  /*  字号 */
  font-size: 16px;
  
  /*  字体颜色  */
  color: #333;
  
  /* 行距 */
  line-height: 1.75;
}

这里说明一下-apple-system 和 BlinkMacSystemFont 就是让 MAC OS 自动选择系统字体的意思。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html

最后，网页设计趋势是不断变化的，比如微软和苹果突然又冒出了一款超牛 X 网页字体……，此时设计师们就要根据需求而变了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/24184.html