letter-spacing 字间距

基本语法

letter-spacing: 间距值;

常用单位

1. px - 像素

letter-spacing: 30px;

2. em - 字符单位

letter-spacing: 0.5em;  /* 0.5个字符宽度 */
letter-spacing: 2em;    /* 2个字符宽度 */

3. normal - 默认值

letter-spacing: normal;  /* 浏览器默认 */

4. 负值 - 缩小间距

letter-spacing: -2px;  /* 字符更紧凑 */

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>letter-spacing 字间距</title>
  <style>
    .letter {
      /* 正常 normal */
      letter-spacing: 30px;
    }
    .normal {
      letter-spacing: normal;
    }
    .tight {
      letter-spacing: -2px;
    }
  </style>
</head>
<body>
  <div class="letter">增加字间距</div>
  <div class="normal">正常字间距</div>
  <div class="tight">紧凑字间距</div>
</body>
</html>

实际应用

场景1: 标题增加字间距

h1 {
  letter-spacing: 2px;
}

场景2: 特殊标题效果

.spaced-title {
  letter-spacing: 10px;
  font-size: 24px;
}

场景3: 紧凑文字

.tight-text {
  letter-spacing: -1px;
}

场景4: 英文标题

.english-title {
  letter-spacing: 3px;
  text-transform: uppercase;
}

场景5: 响应式调整

/* 移动端 */
@media (max-width: 768px) {
  h1 {
    letter-spacing: 1px;
  }
}

/* 桌面端 */
@media (min-width: 769px) {
  h1 {
    letter-spacing: 3px;
  }
}

与 word-spacing 的区别

属性	作用	适用文字	示例
`letter-spacing`	字间距	中英文都有效	`letter-spacing: 5px;`
`word-spacing`	词间距	只对英文单词有效	`word-spacing: 10px;`

/* 字间距 - 中英文都有效 */
.text {
  letter-spacing: 5px;
}

/* 词间距 - 只对英文有效 */
.english {
  word-spacing: 10px;
}

常用值建议

用途	推荐值
正文	`normal` 或 `0.5px`
标题	`1px` - `3px`
特殊效果	`5px` - `10px`
紧凑文字	`-1px` - `-3px`

注意事项

兼容性: 中英文都有效
负值: 可以缩小间距,但不要设置过小
可读性: 过大的字间距影响可读性
继承: 会继承给子元素

学习要点

作用: 控制字符之间的间距
有效: 中英文都有效
单位: px, em, normal, 负值
应用: 标题、特殊效果、紧凑文字
对比: 与 word-spacing 不同,后者只对英文单词间距有效
推荐: 正文 normal, 标题 1-3px

css学习