网站文字的可读性

🌙
手机阅读
本文目录结构

Web 品质- 可读性

正确使用字体和颜色可使您的网站更易阅读。

留意颜色的对比

对于视力不太好的人或者对于不太好的显示设备来说,黑底白字或者白底黑字是最佳的。

在亮色背景上的灰色文字,对比度是很差的:

Grey text on a white background (#EEEEEE)
Grey text on a white background (#CCCCCC)
Grey text on a white background (#AAAAAA)
Grey text on a white background (#888888)
Grey text on a white background (#666666)
Grey text on a white background (#444444)
Grey text on a white background (#222222)
Grey text on a white background (#111111)

在暗色背景上的灰色文字,其对比度同样很差:

Grey text on a black background (#222222)
Grey text on a black background (#444444)
Grey text on a black background (#666666)
Grey text on a black background (#888888)
Grey text on a black background (#AAAAAA)
Grey text on a black background (#CCCCCC)
Grey text on a black background (#DDDDDD)
Grey text on a black background (#EEEEEE)

某些搭配 - 比如黑色和红色,黑色和蓝色,黄色和绿色 - 都会使人产生视觉疲劳:

Black text on a red background
 
Black text on a blue background
 
Yellow text on a green background

下面这些搭配是不错的的:

Black text on a grey background
 
Black text on a light blue
 
Black text on antique white
 
White text on dark blue

留意字母的间距

对于视力比较弱的读者,比较近的字母间距会带有不小的阅读困难。

文字间距适中的文本就比较容易阅读了。

文字间距少的文字难以阅读。

当心你的行距

具有良好的行距的文本更易阅读

行距小的文本难以阅读

避免花哨的字体

正常的字体容易阅读….

花哨的字体是难以阅读….

尽量少用斜体

普通字体易于阅读。

斜体字体不那么容易阅读。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>