html – 使用CSS提高文本可读性

2023年3月30日 207次阅读

我正在尝试设置
this pen的样式,我无法为文本获得正确的CSS,使其更具可读性,而不是看起来过于拥挤.

核心CSS：

p{
    color: #000;
    font-size: 16px;
    line-height: 1.25em;
    padding: 0 0 1em 0;
    text-align: justify;
}

我计划将改进的CSS用于普通版,桌面版和移动版.这是我认为移动可读性的一个很好的例子的屏幕.

《html – 使用CSS提高文本可读性》

最佳答案 行高,字体大小,颜色都很好.我通常使用颜色：#333或颜色：#777在白色背景和黑色字母之间创建较少的对比度.

您可能还需要考虑letter-spacing,它会创建一个更“通风”的感觉,文本字符之间有更多的空格：

h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 5px;
    letter-spacing: .05em
}

p {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
  letter-spacing: .03em;
}

DEMO：http://codepen.io/anon/pen/ojaMEy

点赞