跳到主要内容位置

CSS 设置文字间距

在网页开发中,有时候需要把文字之间的间距调大,来让用户在视觉上放松,过于紧凑的字体会显得拥挤,除了让网站的排版显得杂乱之外,还会让用户的眼睛劳累,从而降低了用户体验。有些字体默认宽松,有的默认紧凑,这个时候就需要根据情况来调节它们的间距。

letter-spacing#

改变字符间距在 CSS 中使用 letter-spacing 属性,给它设置一个具体的数值,单位可以是 pxemrem% 等长度单位,它会应用到每个字符上。例如,把一段文字的间距调宽,可以使用下面的代码:

<style>  p {    letter-spacing: 1em;  }</style><p>这是一段间距比较宽的文字</p>

预览:

设置字符间距的时候,一定要根据视觉,设定合理的数值,如果间距过窄,会让文字都重叠在一起,如果过宽,又会影响阅读,正常的间距应该是一眼看上去比较舒服,且整个页面都很整齐。这里一定要注意。

小结#

这一节我们介绍了如何设置文字的字符间距,可以是任何长度单位,它会应用在每个字符上,所以会影响每个字符相邻的距离,一定要注意不要设置过宽或过窄的间距,因为无论那种情况都会影响用户的阅读体验。