如何设置 CSS 字体

在网页设计中，CSS 字体的设置至关重要，它能极大地影响用户的视觉体验。下面将详细介绍如何设置 CSS 字体。

首先是字体类型的选择。在 CSS 中，使用 font-family 属性来指定字体。可以选择系统自带的通用字体族，比如 serif（衬线字体，有装饰性的笔画末端，给人传统、正式的感觉）、sans-serif（无衬线字体，简洁现代，常用于网页正文和标题）、monospace（等宽字体，每个字符宽度相同，适合显示代码等）。也可以指定具体的字体名称，如 font-family: Arial, sans-serif;，这里将 Arial 作为首选字体，如果用户设备上没有 Arial 字体，就会 fallback 到无衬线字体族。

字体大小的设置通过 font-size 属性实现。它可以使用多种单位，常见的有像素（px）、em 和 rem。像素是固定单位，如 font-size: 16px; 会将字体设置为固定的 16 像素大小。em 是相对单位，相对于父元素的字体大小，例如父元素字体大小为 16px，设置子元素 font-size: 1.5em;，那么子元素字体大小就是 16 * 1.5 = 24px。rem 则是相对于根元素（html 元素）的字体大小，这在进行页面整体布局和响应式设计时非常有用。

字体粗细可以用 font-weight 属性调整。常见的值有 normal（正常粗细）、bold（加粗），也可以使用 100 - 900 的数字来更精确地控制，比如 font-weight: 700; 与 font-weight: bold; 效果类似。

字体样式通过 font-style 属性改变，常见值有 normal（正常样式）、italic（斜体）、oblique（倾斜体，与 italic 类似但某些字体显示略有不同）。

为了让网页在不同设备上都能有良好的显示效果，还需要考虑响应式字体设置。可以结合媒体查询和相对单位来实现，比如在不同屏幕宽度下调整字体大小：

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

通过上述设置 CSS 字体的方法，能够打造出美观、易读且适配不同设备的网页字体效果。