CSS Font-Weight

2025年3月17日 | 阅读 7 分钟

引言

CSS font weight 是 Web 开发中用于控制网页中文本的粗细和加粗程度的属性。它用于定义文本的粗细。可用的粗细取决于浏览器使用的字体系列。

它在排版中起着重要作用，因为它使设计者和程序员能够更深入地控制文本的视觉外观并强调文本元素。

Font-Weight 属性的用途

font-weight 属性的主要目的是设置字体的粗细，这会影响字符在屏幕或打印时的粗细程度。它是一种灵活的文本格式化工具，因为它提供了一系列值来管理粗细级别。

根据 Web 浏览器的字体系列，可以使用几种 font-weight 值。不同的字体系列有自己的预定义字体粗细，虽然有些可能提供更广泛的选择，但有些可能只提供少数选项。

注意：font-weight 属性经常与其他 CSS 属性（如 font-size、font-family 和 font-style）一起使用，以在整个网站中提供一致的文本设计。

语法和属性值

CSS font-weight 属性包含各种属性值，用于控制文本的粗细和加粗程度，并遵循指定的语法。

语法

font-weight: normal | lighter | bolder | bold | number | inherit |initial | unset;

属性值

Normal：这是默认的字体粗细，其数值为 400。它指的是所选字体系列的标准粗细。
Lighter：它考虑了字体系列的现有字体粗细，并使字体粗细比父元素更轻。与父元素的字体粗细相比，使用 lighter 值时字体粗细会更轻。
Bolder：相反，bolder 值会使字体粗细比父元素的字体粗细更重。它考虑了字体系列的现有字体粗细，并使 font-weight 比父元素更重。
Bold：顾名思义，它定义了粗体字体粗细，其数值为 700。
Number：它根据指定的数字设置字体粗细。其范围可以在 1 到 1000 之间。
Initial：它用于将字体粗细设置为其默认值。
Inherit：使用继承值，字体粗细可以从其父元素继承。当您希望元素的字体粗细与其父元素匹配时，这会很有帮助。
Unset：unset 值将字体粗细恢复到基于继承规则的默认 normal 或 natural 值设置。

如何在 CSS 中使用 Font Weight

1. 将 font weight 应用于元素

可以通过 CSS 将 font-weight 属性应用于特定的 HTML 元素，以修改文本的粗细和加粗程度。这样做可以创建各种文本样式并突出显示信息中的特定部分。

示例 1：段落的字体粗细

p {
  font-weight: normal; /* Sets the font weight to normal for all paragraphs */
}

在上面的示例中，HTML 内容中的所有段落（<p>）将使用默认字体粗细，即 normal（通常为 400）。

示例 2：使标题加粗

h1, h2, h3 {
  font-weight: bold; /* Sets the font weight to bold for h1, h2, and h3 headings */
}

此 CSS 规则将 <h1>、<h2> 和 <h3> 元素的 font-weight 设置为 bold（通常为 700），从而使这些标题显示为粗体。

示例 3：特定类的自定义字体粗细

.my-custom-text {
  font-weight: 600; /* Sets the font weight for elements with class "my-custom-text" */
}

在这种情况下，字体粗细将为 600，提供中等粗细的文本样式。

示例 4：font-weight 与其他属性的结合使用

h4 {
  font-weight: 500; /* Sets the font weight to 500 for h4 headings */
  font-size: 24px; /* Sets the font size to 24 pixels for h4 headings */
  font-family: "Helvetica Neue", Arial, sans-serif; /* Applies a specific font-family to h4 headings */
  /* Other CSS properties can also be combined here for comprehensive text styling */
}

此示例中使用 font-weight、font-size 和 font-family 属性来设置 h4> 标题的样式。这为所选元素创建了统一且一致的排版风格。

2. 设置全局字体粗细

在使用 CSS 时，您可以定位 body 选择器，将全局字体粗细应用于整个文档或其一部分。通过将 font-weight 属性应用于 body 元素，可以为所有网页文本设置统一的字体粗细。

当您希望保持网站的视觉设计始终如一时，此策略会很有帮助。

示例 1

body {
  font-weight: 400; /* sets the document's overall font-weight to 400. */
}

此示例将 font-weight 属性应用于 body 选择器，值为 400，代表标准（normal）字体粗细。这将确保 <body> 标签内所有文本元素的字体粗细一致且正确。

示例 2：全局字体粗细与其他选择器的结合使用

body {
  font-weight: 400; /* Sets the font weight to 400 for the entire document */
}

h1 {
  font-weight: 700; /* Sets the font weight to 700 for all h1 headings */
}

p {
  font-weight: 300; /* Sets the font weight to 300 for all paragraphs */
}

此示例将全局字体粗细用于整个文档，同时将不同的字体粗细应用于特定的 HTML 组件。其余内容将使用全局字体粗细（400），标题（<h1>）为粗体（700），段落（<p>）为较轻的字体粗细（300）。

因此，通过使用 body 选择器建立通用的字体粗细，您可以管理网站上文本的整体外观。

3. 与其他属性结合使用

CSS 的 font-weight 属性可以与其他文本相关的属性一起使用，以产生全面且美观的排版效果。

示例 1：与 font-family 结合使用

p {
  font-weight: 300; /*font-weight 300 for paragraphs */
  font-family: "Helvetica Neue", Arial, sans-serif; /* Applies a specific font-family to paragraphs */
}

在这里，所有段落（<p>）都赋予了自定义的字体粗细 300（较轻的风格）。此外，我们为段落指定了特定的字体系列，这将影响文本的字体粗细和整体外观。

示例 2：与 font-size 结合使用

h2 {
  font-weight: 600; /* font-weight 600 for h2 headings */
  font-size: 28px; /* font size 28 pixels for h2 headings */
}

此示例结合了 <h2> 标题的字体粗细和大小。字体大小为 28 像素，字体粗细为 600（中等粗体）。通过这种组合，您可以创建视觉上引人注目且迷人的标题。

示例 3：与 line-height 结合使用

blockquote {
  font-weight: bold; /* font-weight - bold for blockquotes */
  line-height: 1.5; /* Sets the line height to 1.5 times the font size for blockquotes */
}

在此插图中，块引用（blockquote）的 font-weight 属性设置为 bold。此外，line height 属性更改为字体大小的 1.5 倍。

示例 4：与 text-decoration 结合使用

a {
  font-weight: 500; /* font-weight 500 for anchor links */
  text-decoration: underline; /* Underlines anchor links */
}

对于锚链接（<a>），我们指定了自定义字体粗细 500。锚链接还使用 text-decoration 属性进行下划线处理，这有助于它们脱颖而出并更容易识别。

在 CSS 中使用 Font-Weight 的最佳实践

可访问性注意事项

在 CSS 中使用 font-weight 属性时，考虑可访问性至关重要，以确保您的文本对所有用户（包括视障人士）都易于访问和使用。

以下是一些关键考虑因素：

可读性和对比度：确保文本和背景有足够的对比度。对于视力有限或色盲的人来说，选择提供足够对比度的字体粗细可以帮助他们更容易识别文本。
避免过度使用粗体文本：粗体文本可以强调重点，但要谨慎使用，因为它可能会使书写内容难以阅读。过多的粗体文字会让用户感到不知所措，导致难以找到最重要的信息。
语义含义：使用字体粗细来传达内容的语义含义。例如，标题的字体样式应与正文文本不同（例如粗体），以表示其在层级结构中的重要性。
响应式设计：考虑为不同的屏幕尺寸调整字体粗细。确保 font-weight 能够正确地为不同的视口缩放。在宽屏上可读的内容在较小的设备上可能难以阅读。
用户偏好：遵守用户操作系统或浏览器的偏好设置。您的网站应适应用户对特定字体粗细的任何偏好。
使用屏幕阅读器进行测试：使用屏幕阅读器测试您的网站，以确保盲人用户能够区分不同的字体粗细。确保所需的强调效果能够正确传达至关重要，因为屏幕阅读器通常会读出粗体文本。
字体搭配：使用不同字体粗细时要注意字体搭配。某些字体选择可能会冲突或产生分散注意力的视觉模式，需要提高可读性。
WCAG 指南：了解 WCAG 或 Web 内容可访问性指南。这些建议涵盖了使 Web 内容对所有人（包括残疾人士）都可访问的各个方面。

示例

让我们通过属性值示例来了解 CSS font weight

<!DOCTYPE html>     
<html>   
<head>   
    <title> font-weight property </title>     
    <style>   
        body{   
            font-family: sans-serif;   
        }   
        p.one{   
            font-weight: normal;   
        }   
        p.two{   
            font-weight: lighter;   
        }   
              
        p.three{   
            font-weight: bolder;   
        }   
        
        p.four{   
            font-weight: bold;   
        }   
        
        p.five{   
            font-weight: 1000;   
        }   
        
        p.six{   
            font-weight: initial;   
        }   
        p.seven{   
            font-weight: inherit;   
        }   
        p.eight{   
            font-weight: unset;   
        }   
        
    </style>   
</head>     
<body>   
    <p class="one">   
       normal property value  
    </p>   
    <p class="two">   
      lighter property value  
    </p>   
    
    <p class="three">   
      bolder property value  
    </p>   
    <p class="four">   
      bold property value  
   </p>   
   <p class="five">   
      number property value  
   </p>   
  
    <p class="six">   
      initial property value  
    </p>   
    <p class="seven">   
      inherit property value  
    </p>   
    <p class="eight">   
      unset property value  
    </p>   
</body>   
</html>

下一主题CSS font-stretch

← prev next →

CSS Font-Weight

引言

Font-Weight 属性的用途

注意：font-weight 属性经常与其他 CSS 属性（如 font-size、font-family 和 font-style）一起使用，以在整个网站中提供一致的文本设计。

语法和属性值

如何在 CSS 中使用 Font Weight

1. 将 font weight 应用于元素

2. 设置全局字体粗细

3. 与其他属性结合使用

在 CSS 中使用 Font-Weight 的最佳实践

可访问性注意事项

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Font-Weight

引言

Font-Weight 属性的用途

注意：font-weight 属性经常与其他 CSS 属性（如 font-size、font-family 和 font-style）一起使用，以在整个网站中提供一致的文本设计。

语法和属性值

如何在 CSS 中使用 Font Weight

1. 将 font weight 应用于元素

2. 设置全局字体粗细

3. 与其他属性结合使用

在 CSS 中使用 Font-Weight 的最佳实践

可访问性注意事项

相关帖子

CSS 备忘单

CSS Position

CSS checkbox style

CSS Width

上标 & 下标

CSS text-decoration

CSS 颜色

CSS 背景

CSS Animation keyframes

Normalize CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器