当前位置：首页 > news >正文

第3章：文本样式 --[CSS零基础入门]

news 2025/12/16 1:52:22

CSS（层叠样式表）允许你以多种方式定制文本的外观。以下是一些常用的文本和字体相关的CSS属性：

当然，下面是两个使用不同字体系列的CSS示例。每个示例都展示了如何指定一个字体系列，并提供备用字体以确保在用户的系统中找不到首选字体时仍有合适的字体可用。

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

在这个例子中，我们首先尝试使用"Helvetica Neue"，这是一种现代且流行的无衬线字体。如果用户的系统上没有安装这种字体，则会依次尝试Helvetica、Arial和"Lucida Grande"。最后，如果所有这些字体都不可用，浏览器将回退到任何可用的无衬线字体。

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

这里，我们为段落元素指定了一个衬线字体系列。首选"Times New Roman"，它是一种经典的印刷字体。如果这个字体不可用，浏览器会尝试使用Times。作为最后的选择，任何可用的衬线字体都会被用来显示文本。

这两种字体系列适用于不同的设计需求。无衬线字体通常看起来更现代和简洁，适合用于标题或需要清晰度的地方；而衬线字体则常常给人一种传统和正式的感觉，非常适合用于正文或长篇阅读材料。

如果你想要应用这些样式到你的HTML文档中，只需将上述CSS代码添加到你的样式表或者HTML文档的<style>标签内即可。

em 是相对于其父元素的字体大小。在上面的例子中，p标签内的文本将基于body的字体大小（16px），所以1.25em等于20px（16 * 1.25 = 20）。
rem 是相对于根元素（即<html>元素）的字体大小。这使得整个页面的字体大小更加一致，并且更容易维护。例如，.button类中的文本大小是根据<html>元素的默认字体大小计算出来的，如果未特别设置，则通常为16px，因此1.5rem等于24px（16 * 1.5 = 24）。

使用相对单位如em或rem的好处在于它们可以更好地支持响应式设计，使文本能够根据用户的设置或屏幕尺寸进行缩放，从而提高可访问性。

你可以选择最适合你项目需求的方法来设置字体大小。

当然，下面是两个关于如何使用CSS设置字体粗细（font-weight）的示例。这两个示例展示了不同的方法来定义字体的粗细程度。

p.normal-text {font-weight: normal; /* 正常字体粗细 */
}h1.bold-text {font-weight: bold; /* 加粗字体 */
}

在这个例子中，我们使用了normal和bold关键字来设置段落和标题文本的粗细。normal是默认的字体粗细，而bold则会使文本加粗显示。这是最简单且常用的方法来调整字体粗细。

.very-thin-text {font-weight: 100