📜  CSS 文本渲染(1)

📅  最后修改于: 2023-12-03 15:14:21.883000             🧑  作者: Mango

CSS 文本渲染

CSS 可以用来控制文本的渲染样式,包括字体、字号、颜色、对齐方式、行距、字间距、文本阴影等等。以下是一些关于文本渲染的 CSS 属性。

字体

我们可以用 font-family 属性定义文本的字体,例如:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

这里我们定义了一个字体栈,优先使用 "Helvetica Neue",如果没有则使用 Helvetica,再没有则使用 Arial,最后如果都没有则使用系统默认的 sans-serif 字体。

字号

我们可以用 font-size 属性定义字号,例如:

h1 {
  font-size: 32px;
}
p {
  font-size: 16px;
}

注意到这里定义的字号是绝对值,因此在不同的设备上可能会有不同的渲染效果,如需保持一致的大小,可以使用 em 或 rem 等相对单位。

颜色

我们可以用 color 属性定义文本颜色,例如:

h1 {
  color: #333;
}
p {
  color: rgb(128, 128, 128);
}

这里我们分别使用了十六进制颜色和 RGB 颜色来定义文本颜色。

对齐方式

我们可以用 text-align 属性定义文本的对齐方式,例如:

h1 {
  text-align: center;
}
p {
  text-align: justify;
}

这里 text-align 属性接受的值有 left、center、right 和 justify 四个,分别表示左对齐、居中对齐、右对齐和两端对齐。

行距和字间距

我们可以用 line-height 属性定义行距,用 letter-spacing 属性定义字间距,例如:

h1 {
  line-height: 1.5;
  letter-spacing: 2px;
}
p {
  line-height: 1.8;
  letter-spacing: 1px;
}

这里我们分别定义了标题和段落的行距和字间距。

文本阴影

我们可以用 text-shadow 属性定义文本阴影,例如:

h1 {
  text-shadow: 2px 2px #ccc;
}
p {
  text-shadow: none;
}

这里我们为标题添加了一个 2px 的模糊黑阴影,而段落则没有阴影。

以上便是一些基本的 CSS 文本渲染技巧,您可以进一步了解和运用它们来创建出更漂亮的网站。