CSS 字体

栏目： CSS 发布时间：2024-11-12

CSS（层叠样式表）提供了丰富的工具来设置网页中的字体样式。通过合理使用CSS，你可以使网页文本更加美观、易读和富有表现力。以下是一个详细的CSS字体教程，涵盖基本和高级技巧。

1. 基本字体属性

1.1 `font-family`

font-family 属性用于指定文本的字体系列。你可以指定多个字体名称，浏览器会按顺序尝试这些字体，直到找到可用的字体。

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

1.2 `font-size`

font-size 属性用于设置文本的字体大小。可以使用像素（px）、相对单位（em、rem）、百分比（%）等。

p {
    font-size: 16px; /* 使用像素 */
    /* 或者 */
    font-size: 1.2em; /* 使用相对单位 */
}

1.3 `font-weight`

font-weight 属性用于设置文本的粗细。常用值有 normal（正常）、bold（粗体）、bolder（更粗）、lighter（更细），以及100到900之间的数字（每100为一个等级）。

p {
    font-weight: bold;
    /* 或者 */
    font-weight: 700;
}

1.4 `font-style`

font-style 属性用于设置文本的样式，如正常、斜体或倾斜。常用值有 normal、italic 和 oblique。

p {
    font-style: italic;
}

1.5 `font-variant`

font-variant 属性用于设置文本的小型大写字母。常用值有 normal 和 small-caps。

p {
    font-variant: small-caps;
}

2. 字体属性简写

你可以将上述多个字体属性组合成一个简写属性 font，按顺序包括 font-style、font-variant、font-weight、font-size/line-height 和 font-family。

p {
    font: italic small-caps bold 16px/1.5 "Helvetica Neue", Arial, sans-serif;
}

3. 使用自定义字体

通过 @font-face 规则，你可以将自定义字体嵌入到网页中。

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

4. 字体图标

字体图标（如 Font Awesome）是通过CSS将图标嵌入到网页中的技术。你可以通过引入字体图标库并在HTML中使用特定的类来显示图标。

<!-- 引入 Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- 使用图标 -->
<i class="fas fa-home"></i>

5. 字体优化

选择适合的字体格式：

不同的浏览器支持不同的字体格式（如 WOFF、WOFF2、EOT、TTF、SVG）。推荐使用 WOFF2 和 WOFF，因为它们具有良好的兼容性和压缩效果。

字体子集化：

只包含你实际使用的字符，以减小字体文件的大小。

字体加载策略：

使用 font-display 属性控制字体加载时的表现，如 swap、block、fallback 和 optional。

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 字体加载时显示后备字体，加载完成后替换 */
}

6. 字体排印（Typography）

优秀的字体排印不仅关乎字体本身，还包括行高、字间距、段间距等排版细节。

行高（line-height）：

设置行高可以增加文本的可读性。

字间距（letter-spacing）：

调整字符之间的间距。

段间距（margin/padding）：

增加段落之间的间距，使内容更易读。

p {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

总结

通过掌握这些CSS字体属性和技术，你可以创建出既美观又实用的网页文本样式。无论是基本字体设置，还是自定义字体和高级排印技巧，CSS都提供了强大的工具来满足你的需求。希望这篇教程能帮助你更好地理解和使用CSS字体。

本文地址：https://www.tides.cn/p_css-font

标签：前端教程

CSS 字体

1. 基本字体属性

1.1 font-family

1.2 font-size

1.3 font-weight

1.4 font-style

1.5 font-variant