CSS 设置文字间距

550 阅读2分钟

1. css word-spacing属性设置字间距(单词的间距)

  1. word-spacing 属性增加或减少单词间的空白(即字间隔);
  • 在这个属性中,“字” 定义为由空白符包围的一个字符串。也就是说该属性是以空格为基准进行调节间距的,如果多个字母被连在一起,则会被word-spacing视为一个单词;
  • 如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。
  1. 语法:word-spacing:值;
  • normal:定义单词间的标准空间,默认值。
  • length:定义单词间的固定空间(长度值)。
  • inherit:规定应该从父元素继承 word-spacing 属性的值。

image.png

2、css letter-spacing属性设置字间距

letter-spacing 属性增加或减少字符间的空白(字符间距),

  • 该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

  • 对于这个属性来说:每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”!。

  • 属性:该属性所支持的属性值与word-spacing属性相似,可以参考word-spacing属性。

三、word-spacing属性与letter-spacing属性的简单比较

word-spacing属性

  1. 检索或设置对象中的单词之间插入的空格数,允许为负值。 该属性适用英文使用
  2. 对于英文,如果多个字母被连在一起,则会被word-spacing视为一个单词;对汉字,如果汉字被空格分隔,则分隔的多个汉字就被视为不同的单词,word-spacing属性此时有效。

letter-spacing属性

  1. 设置对象中的文字之间的间隔.每一个中文文字以及英文字母之间,都被隔开了所设置的距离,此属性是控制字间距的。该属性是中英文都适用 ;
  2. 只对文字起作用 对于图片失效的;
  3. 对汉字是以一个字进行间隔的, 对于英文是以一个字母进行间隔的。