l-1

WEB教程

主页/CSS教程/CSS核心样式属性/CSS字体属性

CSS教程

CSS字体属性

CSS字体属性详解：字体族,大小,粗细和样式设置

前言

在网页设计与开发中，字体样式的控制是基础且重要的环节。CSS提供了一系列字体属性，允许开发者精确控制文本的显示效果。找找网将详细介绍CSS中常用的字体属性，包括字体系列、字体大小、字体粗细和字体样式等，帮助开发者掌握文本样式的控制方法。

字体系列 (font-family)

font-family 属性用于定义文本使用的字体系列。此属性可以设置多个字体名称作为备用方案，当浏览器不支持第一种字体时，会尝试列表中的下一个字体。

基本语法和用法

font-family属性有两种类型的取值：特定字体系列和通用字体系列。

  • 特定字体系列：指具体的字体名称，如”Georgia”、”Arial”、”微软雅黑”等
  • 通用字体系列：指一组具有相似外观的字体系统组合，CSS定义了5种通用字体系列：
通用字体系列说明典型示例
serif衬线字体，字符笔画末端有装饰性细节Times New Roman、宋体
sans-serif无衬线字体，字符笔画简洁平滑Arial、微软雅黑
monospace等宽字体，每个字符宽度相同Courier New、Consolas
cursive草书字体，模仿手写效果Brush Script MT
fantasy装饰性字体，具有特殊艺术效果Papyrus

使用技巧与实践建议

  1. 字体栈策略：始终提供一个字体列表（字体栈）并以通用字体系列结束
  2. 引号使用：当字体名称包含空格或特殊符号时，需要使用引号包裹
  3. 跨平台考虑：考虑不同操作系统的字体可用性，提供适当的后备字体
<!DOCTYPE html>
<html>
<head>
    <style>
        .serif-example {
            font-family: Georgia, "Times New Roman", Times, serif;
        }
        .sans-serif-example {
            font-family: Arial, Helvetica, sans-serif;
        }
        .chinese-example {
            font-family: "微软雅黑", "Microsoft YaHei", "PingFang SC", sans-serif;
        }
    </style>
</head>
<body>
    <p class="serif-example">这是一个衬线字体示例 - The quick brown fox</p>
    <p class="sans-serif-example">这是一个无衬线字体示例 - The quick brown fox</p>
    <p class="chinese-example">这是一个中文字体示例 - 敏捷的棕色狐狸跳过了懒狗</p>
</body>
</html>

现代字体系列设置

随着Web技术的发展，现代网页设计推荐使用系统字体以提高性能和体验：

modern-font-stack {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", 
                 Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
  • system-ui：使用用户标准系统界面字体
  • -apple-system：在macOS和iOS系统上使用系统字体
  • BlinkMacSystemFont：在macOS上的Chrome浏览器使用系统字体
  • Segoe UI：Windows平台的系统字体

字体大小 (font-size)

font-size属性用于设置文本的字体尺寸。该属性可以使用多种单位定义字体大小，包括绝对单位、相对单位和百分比。

单位与取值

font-size属性支持多种取值方式：

取值类型说明示例
绝对大小关键字预定义的绝对尺寸xx-small, small, medium, large, x-large等
相对大小关键字相对于父元素尺寸larger, smaller
长度值使用具体单位px, pt, em, rem等
百分比相对于父元素字体大小的百分比100%, 120%, 0.8em等

常用单位详解

  1. 像素 (px)：绝对单位，在不同设备上提供一致尺寸
  2. em：相对单位，相对于父元素的字体大小
  3. rem：相对单位，相对于根元素(html)的字体大小
  4. 百分比 (%)：相对于父元素字体大小的百分比

实践示例

<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            font-size: 16px; /* 设置根元素字体大小 */
        }
        .pixel-example {
            font-size: 16px;
        }
        .em-example {
            font-size: 1.2em; /* 父元素字体大小的1.2倍 */
        }
        .rem-example {
            font-size: 1.5rem; /* 根元素字体大小的1.5倍 = 24px */
        }
        .percentage-example {
            font-size: 80%; /* 父元素字体大小的80% */
        }
        .keyword-example {
            font-size: large;
        }
    </style>
</head>
<body>
    <p class="pixel-example">像素单位示例 (16px)</p>
    <div style="font-size: 20px;">
        <p class="em-example">em单位示例 (父元素20px × 1.2 = 24px)</p>
    </div>
    <p class="rem-example">rem单位示例 (根元素16px × 1.5 = 24px)</p>
    <div style="font-size: 30px;">
        <p class="percentage-example">百分比示例 (父元素30px × 80% = 24px)</p>
    </div>
    <p class="keyword-example">关键字大小示例 (large)</p>
</body>
</html>

浏览器默认值与最佳实践

浏览器默认字体大小通常为16px。在响应式设计中，推荐使用相对单位(em、rem)或视口单位(vw、vh)以便更好地适应不同屏幕尺寸。

字体粗细 (font-weight)

font-weight属性用于设置文本字体的粗细程度。该属性支持关键字、相对值和数值三种赋值方式。

属性值与含义

属性值说明数值对应
normal标准字体粗细400
bold粗体700
bolder比父元素更粗相对值
lighter比父元素更细相对值
100-900数值定义，100最细，900最粗整百数值

使用注意事项

  1. 数值对应关系：400相当于normal，700相当于bold
  2. 字体支持：不是所有字体都提供9级粗细，浏览器会自动匹配最接近的可用粗细
  3. 继承性：font-weight具有继承性，子元素会继承父元素的字体粗细设置

实践示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .weight-normal {
            font-weight: normal;
        }
        .weight-bold {
            font-weight: bold;
        }
        .weight-100 {
            font-weight: 100;
        }
        .weight-400 {
            font-weight: 400;
        }
        .weight-700 {
            font-weight: 700;
        }
        .weight-900 {
            font-weight: 900;
        }
        .parent-bold {
            font-weight: bold;
        }
        .child-bolder {
            font-weight: bolder; /* 比父元素更粗 */
        }
    </style>
</head>
<body>
    <p class="weight-normal">normal - 正常粗细 (400)</p>
    <p class="weight-bold">bold - 加粗 (700)</p>
    <p class="weight-100">100 - 较细</p>
    <p class="weight-400">400 - 正常</p>
    <p class="weight-700">700 - 加粗</p>
    <p class="weight-900">900 - 最粗</p>
    <div class="parent-bold">
        父元素加粗文本
        <p class="child-bolder">子元素更粗文本</p>
    </div>
</body>
</html>

字体样式 (font-style)

font-style属性用于定义字体的样式，主要用于设置斜体文本。

属性值与说明

属性值说明
normal标准样式（默认值）
italic斜体样式，使用字体的斜体版本
oblique倾斜样式，将正常文本倾斜显示

italic与oblique的区别

  • italic：使用字体自带的斜体版本，通常字形结构有一定变化
  • oblique：只是简单地将正常文本倾斜，没有字形变化

实践示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .style-normal {
            font-style: normal;
        }
        .style-italic {
            font-style: italic;
        }
        .style-oblique {
            font-style: oblique;
        }
        .custom-oblique {
            font-style: oblique 15deg; /* CSS4支持的角度值 */
        }
    </style>
</head>
<body>
    <p class="style-normal">正常字体样式 (normal)</p>
    <p class="style-italic">斜体字体样式 (italic)</p>
    <p class="style-oblique">倾斜字体样式 (oblique)</p>
</body>
</html>

字体属性简写 (font)

CSS提供了font简写属性，可以在一个声明中设置多个字体属性。

简写语法与顺序

font属性的值必须按以下顺序书写：

font: font-style font-weight font-size/line-height font-family;

使用规则与注意事项

  1. 必需属性：font-size和font-family是必需值，不能省略
  2. 可选属性：font-style和font-weight可以省略，使用默认值
  3. 行高设置：line-height是可选的，跟在font-size后面用斜杠分隔

实践示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .font-shorthand {
            /* font-style font-weight font-size/line-height font-family */
            font: italic bold 16px/1.5 Arial, sans-serif;
        }
        .font-partial {
            /* 只设置必需属性 */
            font: 14px "Microsoft YaHei", sans-serif;
        }
        .font-complete {
            /* 设置所有属性 */
            font: normal 400 1.2rem/1.6 system-ui, -apple-system, sans-serif;
        }

        /* 传统写法对比 */
        .traditional {
            font-style: normal;
            font-weight: bold;
            font-size: 18px;
            line-height: 1.4;
            font-family: Georgia, serif;
        }
        .shorthand {
            font: normal bold 18px/1.4 Georgia, serif;
        }
    </style>
</head>
<body>
    <p class="font-shorthand">简写字体属性示例：斜体、加粗、16px/1.5行高、Arial字体</p>
    <p class="font-partial">部分简写示例：只设置字体大小和字体系列</p>
    <p class="font-complete">完整简写示例：使用现代字体栈</p>

    <p class="traditional">传统写法示例</p>
    <p class="shorthand">简写写法示例</p>
</body>
</html>

其他字体相关属性

除了上述核心字体属性外，CSS还提供了一些其他字体相关属性用于更精细的文本控制。

font-variant 属性

font-variant属性用于设置小型大写字母，该属性可以将小写字母显示为缩小版的大写字母。

.small-caps {
    font-variant: small-caps;
}

font-stretch 属性

font-stretch属性用于设置字体的宽度变体（如紧缩或舒展），但实际支持度有限。

字体属性综合示例

<!DOCTYPE html>
<html>
<head>
    <style>
        .comprehensive-font {
            font-family: "Segoe UI", system-ui, sans-serif;
            font-size: 1.1rem;
            font-weight: 500;
            font-style: normal;
            font-variant: small-caps;
            line-height: 1.6;
        }

        .comprehensive-shorthand {
            font: normal 500 1.1rem/1.6 "Segoe UI", system-ui, sans-serif;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <p class="comprehensive-font">
        综合字体属性示例 - The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890
    </p>
    <p class="comprehensive-shorthand">
        简写结合其他属性示例 - The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890
    </p>
</body>
</html>

总结

CSS字体属性提供了对网页文本样式的全面控制。找找网本教程详细介绍了核心字体属性及其应用方法，以下是主要知识点总结：

知识点说明
font-family定义字体系列，应提供字体栈并以通用字体系列结束
font-size设置字体尺寸，推荐使用相对单位以适应不同设备
font-weight控制字体粗细，支持数值(100-900)和关键字
font-style设置字体样式，如斜体(italic)或倾斜(oblique)
font简写在一个声明中设置多个字体属性，必须包含font-size和font-family
通用字体系列包括serif、sans-serif、monospace、cursive和fantasy五类
相对单位em(相对于父元素)、rem(相对于根元素)更适合响应式设计
现代字体栈使用system-ui等现代字体值适配不同操作系统

通过合理运用这些字体属性，开发者可以创建出既美观又具有良好可读性的网页文本效果，同时确保跨平台和跨浏览器的一致性显示。

, , ,