使用 letter-spacing 调整字符间距
在这一步中,你将学习如何使用 CSS 的 letter-spacing
属性来控制字符间距。字符间距允许你调整文本中单个字符之间的距离,从而创建独特的排版效果。
继续在 WebIDE 中编辑 text-style.html
文件,以演示不同的字符间距选项:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Letter Spacing Example</title>
<style>
.default-spacing {
/* Default character spacing */
letter-spacing: normal;
}
.tight-spacing {
/* Negative letter spacing */
letter-spacing: -1px;
}
.wide-spacing {
/* Positive letter spacing */
letter-spacing: 3px;
}
.heading-spacing {
/* Spacing for headings */
letter-spacing: 0.1em;
}
</style>
</head>
<body>
<h1>Letter Spacing Demonstration</h1>
<h2>Default Character Spacing</h2>
<p class="default-spacing">
This paragraph has normal character spacing. Each character is positioned
at its default distance.
</p>
<h2>Tight Character Spacing</h2>
<p class="tight-spacing">
This paragraph uses negative letter spacing, bringing characters closer
together.
</p>
<h2>Wide Character Spacing</h2>
<p class="wide-spacing">
This paragraph has increased letter spacing, spreading characters further
apart.
</p>
<h2>Heading with Subtle Spacing</h2>
<h3 class="heading-spacing">Stylish Heading with Subtle Letter Spacing</h3>
</body>
</html>
letter-spacing
属性提供了三种主要选项:
normal
:默认字符间距
- 负值(如
-1px
):缩小字符间距
- 正值(如
3px
):增加字符间距