利用 CSS letter-spacing 属性设置字母间距

使用CSS的letter-spacing属性，我们可以指定文字字母之间的间距。信号间距可以用像素、EM 等长度单位设定。下面让我们看看语法。

语法

letter-spacing属性的语法如下：

letter-spacing: value;

其取值可以是：

  • 普通——字符之间的标准空隙。

  • 长度——字符之间的空隙的长度

以下实例展示了CSS的letter-spacing属性：

以em为单位设置字母间距

在此例中，我们使用了<em> 来设置字母间距。EM是一种相对于字体大小的度量单位。一个em等于16px：

letter-spacing: 2em;

示例

让我们看一个例子：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      p:first-of-type {
         margin: 3%;
         padding: 3%;
         background-color: seagreen;
         color: white;
         letter-spacing: 2em;
         font-size: 2em;
         text-align: center;
      }
   </style>
</head>
<body>
   <p>BOOM</p>
   <p>BOOM</p>
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

以像素为单位设置字母间距

在此例中，我们使用了px来设置字母间距。px代表像素：

letter-spacing: 12px;

示例

让我们看一个例子：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         display: flex;
         margin: 3%;
         padding: 3%;
         border: 23px ridge navy;
      }
      p {
         margin: 3%;
         background-color: navajowhite;
         letter-spacing: 12px;
         font-size: 1.2em;
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <p>BOOM</p>
      <p>abcdefghijklmnop-qrstuvwxyz</p>
   </div>
</body>
</html>

用负值设置字母间距

信号间距可以用letter-spacing属性的负值来设置：

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

示例

让我们看一个例子：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         letter-spacing: 20px;
      }
      
      .demo2 {
         letter-spacing: -1px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p class="demo">This is a demo text.</p>
   <p class="demo2">This is another demo text.</p>
</body>
</html>

更新时间：2023年12月27日

216次浏览

提振您的事业

完成课程获得认证

开始
广告