生图提示词手册
首页 前端设计 优化阅读体验,网站预设字体的CSS最佳写法

优化阅读体验,网站预设字体的CSS最佳写法

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 …

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,只好使用系统自带的默认字体,然而我们有 Windows 和 Mac  OS 两个系统,这两个系统的默认字体是不同的,那么 CSS 中的 font-family、字体大小、颜色、行距如何设置才是最美、最好看的呢?作为网页设计师,对这方面也有所研究,下面是设计达人(公众号ID:shejidaren888)分享下这个设置方法,欢迎一起交流。

注:这里我们只介绍「大多数」的用法,个别特殊设计需求的网站可能不适用此方法。

目录:

  1. 字体
  2. 字体颜色 color
  3. 字号 font-size
  4. 字体行距 line-height
  5. 最佳 CSS 写法

字体

从用户体验角度来讲,段落文本阅读体验最好的是黑体(无衬线体),而非宋体(衬线体),Win7的时候,字体默认的宋体,而从Windows 10开始,浏览器默认字体改成微软雅黑了,而 Mac OS 默认也是黑体而非宋体。

推荐字体:

Windows:MicroSoft YaHei(微软雅黑)
Mac OS:PingFang SC(苹方)或 Hiragino Sans GB(冬青黑体)

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

注:个人喜欢把苹方作为文章标题字体(20PX以上),而冬青黑体作为段落字体。

字体颜色 Color

大部网页背景颜色是使用白色,所以字体应该是使用黑色较为友好,当不建议使用纯黑(#000),这是因为纯白底与纯黑的对比太过于强烈,可以使用灰一点的黑色,比如#333,这样能减轻用户视觉负担。

推荐字体颜色:#333

body{
	color:#333;
}

字体 Font-Size

由于现在的电脑屏都是宽屏,手机的屏幕更是高清屏,所以字体大小建议采用16PX字号会比较适合阅读。

推荐字体szie:16px

body{
	font-size:16px;
}

字体行距 Line-Height

字体行距对于阅读也有有很大的影响,比较选中太小,对于多行文字的时候,容易在阅读时「串行」,所以字体的选中个人建议是字体的1.5 – 2.0倍之间。

推荐行距:1.75EM

body{
	line-height:1.75; 
}

这里后面我没有加入 em,是因为CSS默认就是 em 为单位,所以 em 可以省略不写

最佳 CSS 写法

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

这里说明一下-apple-systemBlinkMacSystemFont 就是让 MAC OS 自动选择系统字体的意思。

最后,网页设计趋势是不断变化的,比如微软和苹果突然又冒出了一款超牛 X 网页字体……,此时设计师们就要根据需求而变了。

以上内容就是“优化阅读体验,网站预设字体的CSS最佳写法”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容,可以来AdobeEdu设计联盟官方网站获取

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

站酷力荐的AIGC电商设计研修班开班啦

站酷力荐的AIGC电商设计研修班开班啦!来站酷,学AIGGC+电商设计,真实项目贯穿,干货满满,拒绝割韭菜,赶快点击上方...
2022年 CodePen 最热门的前端代码 Top 100

2022年 CodePen 最热门的前端代码 Top 100

每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,有空看看都能给我们带...
优化阅读体验,网站预设字体的CSS最佳写法

优化阅读体验,网站预设字体的CSS最佳写法

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,...
架构图有哪些?很多程序员都不会画

架构图有哪些?很多程序员都不会画

很多程序员画架构图头疼,不知道画什么、怎么画! 分享、评审、述职、答辩,只要你在程序员这个行业,就几乎离不开要画图。 一...
CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案...

发表回复

返回顶部