!
也想出现在这里? 联系我们
广告位

优化阅读体验网站全局字体CSS最佳写法

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

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

字体

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

推荐字体:

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

  1. body{
  2. fomt-family: Hiragino Sans GB, MicroSoft YaHei;
  3. }

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

字体颜色

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

推荐字体颜色:#333

  1. body{
  2. color:#333;
  3. }

字体大小

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

推荐字体 szie:16px

  1. body{
  2. font-size:16px;
  3. }

字体行距

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

推荐行距:1.75EM

  1. body{
  2. line-height:1.75;
  3. }

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

总结

  1. body {
  2. /* 字体 */
  3. font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  4. /* 字号 */
  5. font-size: 16px;
  6. /* 字体颜色 */
  7. color: #333;
  8. /* 行距 */
  9. line-height: 1.75;
  10. }

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

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

给TA打赏
共{{data.count}}人
人已打赏
前端学习

巧妙利用CSS自动裁剪图像

2024-7-26 13:38:42

前端学习

CSS文本中换行不生效空格合并

2024-7-29 10:29:36

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索