您好！欢迎访问家园网-www.jy.wang!

家园网

您当前的位置：首页 > 计算机技术 > CSS

详细讲解css的‌‌‌‌font-weight属性，并列表总结

网络 作者：本站 点击：

CSS font-weight 属性详解

font-weight 是 CSS 中用于设置文本粗细的属性，控制字体的笔画粗细程度。

基本语法

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

属性值详解

1. 关键字值

标准关键字

值说明对应数值
normal正常字体粗细400
bold粗体700

相对关键字

值说明
bolder比继承值更粗一级
lighter比继承值更细一级

相对关键字计算规则：

/* 继承值 -> bolder -> lighter 的变化逻辑 */
继承值 100 → bolder: 400, lighter: 100
继承值 400 → bolder: 700, lighter: 100
继承值 700 → bolder: 900, lighter: 400
继承值 900 → bolder: 900, lighter: 700

2. 数值值

值名称常见用途
100Thin (Hairline)极细字重
200Extra Light (Ultra Light)特细字重
300Light细体
400Normal (Regular)常规体
500Medium中等
600Semi Bold (Demi Bold)半粗体
700Bold粗体
800Extra Bold (Ultra Bold)特粗体
900Black (Heavy)最粗体

使用示例

基础用法

/* 使用关键字 */
p {
    font-weight: normal;  /* 常规 */
}
strong {
    font-weight: bold;    /* 粗体 */
}
/* 使用数值 */
.light-text {
    font-weight: 300;     /* 细体 */
}
.heavy-text {
    font-weight: 800;     /* 特粗体 */
}

相对值应用

.parent {
    font-weight: 500;     /* 中等粗细 */
}
.child-bolder {
    font-weight: bolder;  /* 变为600或700，取决于字体可用粗细 */
}
.child-lighter {
    font-weight: lighter; /* 变为400 */
}

创建视觉层次

h1 { font-weight: 900; }     /* 最粗 - 一级标题 */
h2 { font-weight: 700; }     /* 粗体 - 二级标题 */
h3 { font-weight: 600; }     /* 半粗体 - 三级标题 */
body { font-weight: 400; }   /* 常规 - 正文 */
.caption { font-weight: 300; } /* 细体 - 说明文字 */

字体粗细匹配机制

1. 字体家族必须有对应字重

@font-face {
    font-family: 'MyFont';
    src: url('myfont-bold.woff2') format('woff2');
    font-weight: 700; /* 明确指定字体文件的字重 */
}
@font-face {
    font-family: 'MyFont';
    src: url('myfont-light.woff2') format('woff2');
    font-weight: 300;
}

2. 字体回退规则

当请求的字重不可用时：

  • 浏览器会寻找最接近的可用字重

  • 遵循"400 → 500 → 300 → ..."的查找顺序

  • 如果没有对应字重，浏览器可能：

    1. 合成粗体/细体（效果通常不佳）

    2. 使用可用的最接近字重

实用技巧

1. 响应式字重调整

.title {
    font-weight: 700;
}
@media (max-width: 768px) {
    .title {
        font-weight: 600; /* 小屏幕上使用稍细的字重 */
    }
}

2. 提高可读性

/* 长段落使用常规字重 */
.article {
    font-weight: 400;
    line-height: 1.6;
}
/* 短标题使用较粗字重 */
.section-title {
    font-weight: 600;
    margin-bottom: 1em;
}

3. 品牌一致性

:root {
    --font-weight-heading: 700;
    --font-weight-body: 400;
    --font-weight-accent: 600;
}
h1, h2, h3 {
    font-weight: var(--font-weight-heading);
}
body {
    font-weight: var(--font-weight-body);
}
.highlight {
    font-weight: var(--font-weight-accent);
}

4. 字体加载优化

/* 使用字体加载API确保字体可用 */
@font-face {
    font-family: 'CustomFont';
    src: url('font-light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'CustomFont';
    src: url('font-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

与相关属性配合

1. font-family 优先级

.element {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 500; /* 优先使用Roboto的500字重 */
}

2. 与 font-style 结合

.italic-bold {
    font-style: italic;
    font-weight: 700; /* 粗斜体 */
}

3. font-variation-settings（可变字体）

.variable-font {
    font-family: 'VariableFont';
    font-weight: 350; /* 可变字体支持非整百数值 */
    font-variation-settings: 'wght' 350;
}


font-weight 属性总结表

特性说明
继承性是
初始值normal
适用元素所有元素
动画性是（数值值可动画）
计算值数值或关键字
百分比值不支持
媒体查询支持（@media (max-width)等）

浏览器行为与限制

浏览器支持情况备注
现代浏览器完全支持Chrome, Firefox, Safari, Edge
IE 6-8部分支持仅支持 normal 和 bold
移动浏览器完全支持iOS Safari, Android Chrome
字体合成有限支持浏览器可能合成粗体/细体，但质量差

常见问题与解决方案

问题1：字重不生效

/* 错误：字体文件未定义该字重 */
@font-face {
    font-family: 'MyFont';
    src: url('font-regular.woff2');
    font-weight: 400; /* 只定义了400 */
}
.element {
    font-family: 'MyFont';
    font-weight: 700; /* 无效，字体文件无700字重 */
}

解决方案：

/* 正确定义所有需要的字重 */
@font-face {
    font-family: 'MyFont';
    src: url('font-regular.woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'MyFont';
    src: url('font-bold.woff2');
    font-weight: 700;
}

问题2：性能考虑

  • 每个字重都是独立的字体文件

  • 加载多个字重影响页面性能

  • 建议：仅加载需要的字重

问题3：可变字体优势

/* 传统字体需要多个文件 */
@font-face {
    font-family: 'StaticFont';
    src: url('font-400.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'StaticFont';
    src: url('font-700.woff2') format('woff2');
    font-weight: 700;
}
/* 可变字体只需一个文件 */
@font-face {
    font-family: 'VariableFont';
    src: url('font-variable.woff2') format('woff2-variations');
    font-weight: 100 900; /* 支持100-900范围内的任意值 */
}

最佳实践建议

系统字体回退：

  1. body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
}

渐进增强：

  1. .heading {
    font-weight: bold; /* 基础支持 */
    font-weight: 700;  /* 增强支持 */

可访问性考虑：

  • 确保足够的对比度

  • 避免过细的字重（<300）用于正文

  • 考虑视力障碍用户的需求

性能优化：

/* 使用字体显示策略 */
@font-face {
    font-display: swap; /* 先显示后备字体，再交换 */
    font-weight: 400;
}

font-weight 是排版设计中的核心属性，合理使用可以创建清晰的视觉层次，提升内容的可读性和美观性。在实际开发中，应根据设计需求、字体可用性和性能要求综合考虑。

标签：