跳到主要内容位置

CSS 设置文字间距

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

letter-spacing

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

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

预览:

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

小结

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

提示

一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!

即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!

《React 完全指南》课程,连载中现只需 48 元(领取优惠券)点击查看详情。

《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。

《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。

《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买