阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      网站文字的可读性

      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

      留意字母的间距

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

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

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

      当心你的行距

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

      行距小的文本难以阅读

      避免花哨的字体

      正常的字体容易阅读….

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

      尽量少用斜体

      普通字体易于阅读。

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

      目录
      目录