CSS - letter-spacing 属性

CSS 的letter-spacing属性指定构成单词或文本的字母或字符之间的间距。如果给出正值，则字母或字符之间的间距增加；如果给出负值，则字母或字符之间的间距减小。

语法

letter-spacing: normal | length | initial | inherit;

属性值

值	描述
normal	表示字母之间的正常间距。默认值。
length	以长度单位（px、em、rem 等）指定字母之间的间距。允许使用负值。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS Letter Spacing 属性示例

以下示例使用不同的值解释了line-spacing属性。

使用 Normal 值的 Letter Spacing 属性

要使单词或文本中的字母或字符之间具有正常间距，我们使用normal值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      .px {
         letter-spacing: 5px;
      }

      .normal {
         letter-spacing: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: 5px
   </h4>
   <h3 class="px">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: normal
   </h4>
   <h3 class="normal">
      Observe the spacing in this line of text.
   </h3>


</body>

</html>

使用正值的 Letter Spacing 属性

要使单词或文本中的字母或字符之间有更大的间距，我们使用长度单位（例如 px、cm、rem 等）指定正值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3{
         color: red;
      }
      .px{
            letter-spacing: 7px;
      }
      .cm{
            letter-spacing: 1cm;
      }
      .rem{
            letter-spacing: 1rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: 7px
   </h4>
   <h3 class="px">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: 1cm
   </h4>
   <h3 class="cm">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: 1rem
   </h4>
   <h3 class="rem">
      Observe the spacing in this line of text.
   </h3>
    
</body>

</html>

使用负值的 Letter Spacing 属性

要使单词或文本中的字母或字符之间有更小的间距，我们使用长度单位（例如 px、cm、rem 等）指定负值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      .px1 {
         letter-spacing: -1px;
      }

      .px2 {
         letter-spacing: -2px;
      }

      .rem {
         letter-spacing: -1rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: -1px
   </h4>
   <h3 class="px1">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: -2px
   </h4>
   <h3 class="px2">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: -1rem
   </h4>
   <h3 class="rem">
      Observe the spacing in this line of text.
   </h3>

</body>

</html>

支持的浏览器

属性
letter-spacing	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

打印页面