返回

字体、文本属性，从零了解CSS文本排版

前端

CSS字体和文本属性：美化网页内容

在网页设计中，字体和文本属性至关重要，它们决定了文本的外观和可读性。了解 CSS 中这些属性的用法将帮助你创建视觉上吸引人且易于阅读的网页。

文本属性

行高

行高（line-height）控制相邻文本行之间的垂直间距。它影响文本的可读性和视觉吸引力。适当的行高可以提高文本的清晰度和可读性。

p {
  line-height: 1.5em;
}

文本对齐方式

文本对齐方式（text-align）指定文本在元素容器内的水平对齐方式。它可以是左对齐、右对齐、居中对齐或两端对齐。

p {
  text-align: center;
}

首行缩进

首行缩进（text-indent）设置文本首行的缩进距离。它可以帮助强调文本的开头或在列表中创建层次感。

p {
  text-indent: 2em;
}

字体属性

字体

字体（font-family）指定文本使用的字体。它可以是系统字体、网络字体或本地字体。系统字体是操作系统预装的，而网络字体和本地字体需要单独加载或安装。

p {
  font-family: "Times New Roman", "Microsoft YaHei";
}

字号

字号（font-size）控制文本的字体大小。它可以以像素、百分比或单位 less 值表示。较大的字号更显眼，而较小的字号更适合大段落文本。

p {
  font-size: 16px;
}

字重

字重（font-weight）控制文本的粗细程度。它可以是数字（100-900）或（normal、bold、lighter、bolder）。较高的数字表示更粗的字重。

p {
  font-weight: bold;
}

应用

中英文字体设置

由于英文和中文字体设计不同，因此通常需要分开设置。我们可以使用 CSS 的 font-family 属性分别指定英文和中文字体。

p {
  font-family: "Times New Roman", "Microsoft YaHei";
}

设置文本行高

行高可以提高文本的可读性。适当的行高可以防止文本行太拥挤或太稀疏，从而创造出舒适的阅读体验。

p {
  line-height: 1.5em;
}

设置文本对齐方式

文本对齐方式影响文本在元素内的位置。根据元素的布局和内容，选择合适的对齐方式可以增强视觉吸引力。

p {
  text-align: center;
}

结论

掌握 CSS 字体和文本属性对于创建美观且易于阅读的网页至关重要。通过有效地运用这些属性，我们可以控制文本的外观和可读性，从而提升用户体验和网页整体美感。

常见问题解答

  1. 如何设置默认字体？

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

  2. 如何让文本闪烁？

    p {
  text-shadow: 0 0 2px #ff0000;
  animation: blink 1s linear infinite;
}
@keyframes blink {
  0% {
    text-shadow: 0 0 2px #ff0000;
  }
  50% {
    text-shadow: none;
  }
  100% {
    text-shadow: 0 0 2px #ff0000;
  }
}

  3. 如何创建倾斜的文本？

    p {
  font-style: italic;
}

  4. 如何创建阴影文本？

    p {
  text-shadow: 2px 2px 2px #000000;
}

  5. 如何将文本设置为大写？

    p {
  text-transform: uppercase;
}