CSS 中都有什么字体样式

在网页设计中，CSS（层叠样式表）的字体样式起着至关重要的作用，它能够让网页的文字呈现出丰富多样的视觉效果，提升用户体验。下面就来详细了解一下 CSS 中常见的字体样式。

字体族（font-family）是 CSS 字体样式的基础。通过它，我们可以指定网页文字使用的字体。例如，设置 font-family: Arial, sans-serif;，这表示优先使用 Arial 字体，如果用户设备上没有 Arial 字体，则会使用无衬线字体（sans-serif）作为替代。常见的字体族包括 serif（衬线字体，如 Times New Roman）、sans-serif（无衬线字体，如 Arial、Helvetica）、monospace（等宽字体，常用于代码展示，如 Courier New）等。

字体大小（font-size）决定了文字的尺寸。可以使用绝对单位（如 px，像素）或相对单位（如 em、rem）来设置。比如 font-size: 16px; 会将文字设置为 16 像素大小，这种方式大小固定。而 font-size: 1.2em; 则是以父元素字体大小为基准进行相对设置，这样能让网页在不同设备和屏幕尺寸下保持更好的布局适应性。

字体粗细（font-weight）能改变文字的粗细程度。可以使用关键字（如 normal、bold）或数字值（100 - 900）来设置。例如 font-weight: bold; 会使文字加粗显示，而 font-weight: 400; 等同于 normal，是正常粗细。

字体样式（font-style）用于设置文字是否倾斜。常见的值有 normal（正常，不倾斜）、italic（斜体）和 oblique（倾斜体）。font-style: italic; 会让文字呈现出斜体效果，为网页增添独特风格。

文字装饰（text-decoration）可以为文字添加下划线、上划线、删除线等效果。比如 text-decoration: underline; 会给文字添加下划线，text-decoration: line-through; 则添加删除线，text-decoration: overline; 添加的是上划线。

掌握这些 CSS 字体样式，能帮助网页设计师根据不同的设计需求，精准地调整文字的外观，使网页内容更加清晰易读、美观吸引人，在竞争激烈的网络环境中脱颖而出。