当前位置：首页 > 前端开发 > 正文

如何在HTML中设置文本字体粗细？

admin
前端开发
2025-06-12
2177

如何在HTML中设置文本字体粗细？第1张

在HTML中通过CSS的font-weight属性控制文本粗细，可使用关键字（normal/bold）或数值（100-900），常用方法包括内联样式、内部样式表或外部CSS文件设置，如 p { font-weight: 600; }实现加粗效果。

<style>
  .article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 25px;
    line-height: 1.7;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
    margin-top: 30px;
  }
  .code-block {
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 20px 0;
    overflow-x: auto;
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
  }
  .tip-box {
    background: #e3f2fd;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 25px 0;
    border-left: 4px solid #2196f3;
  }
  .accessibility-note {
    background: #fff8e1;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    margin: 25px 0;
  }
  .property-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  .property-table th {
    background: #3498db;
    color: white;
    text-align: left;
    padding: 12px 15px;
  }
  .property-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
  }
  .property-table tr:nth-child(even) {
    background-color: #f8f9fa;
  }
  .responsive-example {
    background: #e8f5e9;
    padding: 20px;
    border-radius: 8px;
    margin: 25px 0;
  }
</style>
<div class="article-container">
  <p>在网页设计中，字体粗细不仅是视觉装饰元素，更是构建信息层级、引导用户视线的重要工具，恰当的字体粗细能让关键内容脱颖而出，提升可读性和用户体验，本文将深入解析HTML/CSS中控制字体粗细的专业方法。</p>
  <h2>核心CSS属性：font-weight</h2>
  <p>通过CSS的<strong>font-weight</strong>属性控制文本粗细，支持多种赋值方式：</p>
  <div class="code-block">
    /* 关键字赋值 */<br>
    p { font-weight: normal; }   /* 默认值 */<br>
    h1 { font-weight: bold; }    /* 加粗 */<br>
    .light-text { font-weight: lighter; } /* 相对更细 */<br><br>
    /* 数值赋值（推荐） */<br>
    .thin { font-weight: 100; }  /* 细体 */<br>
    .medium { font-weight: 500; }/* 中等 */<br>
    .heavy { font-weight: 700; } /* 等同于bold */<br>
    .black { font-weight: 900; } /* 超粗体 */
  </div>
  <h2>数值体系详解</h2>
  <p>font-weight的数值范围从100到900（整百递增），不同数值对应不同字重：</p>
  <table class="property-table">
    <thead>
      <tr>
        <th>数值</th>
        <th>等价关键字</th>
        <th>典型应用场景</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>100</td>
        <td>Thin/Hairline</td>
        <td>装饰性文本、页脚注释</td>
      </tr>
      <tr>
        <td>300</td>
        <td>Light</td>
        <td>副标题、次要信息</td>
      </tr>
      <tr>
        <td>400</td>
        <td>Normal</td>
        <td>正文默认粗细</td>
      </tr>
      <tr>
        <td>700</td>
        <td>Bold</td>
        <td>标题、重点强调</td>
      </tr>
      <tr>
        <td>900</td>
        <td>Black</td>
        <td>大型标题、视觉焦点</td>
      </tr>
    </tbody>
  </table>
  <div class="tip-box">
    <strong>专业提示：</strong> 数值赋值比关键字更精确，尤其在需要多级字重时（如300/500/700的组合）
  </div>
  <h2>三种实现方式对比</h2>
  <p>根据项目需求选择合适的作用域：</p>
  <h3>1. 内联样式（快速调试）</h3>
  <div class="code-block">
    &lt;p style="font-weight: 600"&gt;直接作用于单个元素&lt;/p&gt;
  </div>
  <h3>2. 内部样式表（单页适用）</h3>
  <div class="code-block">
    &lt;style&gt;<br>
    &nbsp;&nbsp;.article-title { <br>
    &nbsp;&nbsp;&nbsp;&nbsp;font-weight: 800; <br>
    &nbsp;&nbsp;}<br>
    &lt;/style&gt;
  </div>
  <h3>3. 外部CSS（最佳实践）</h3>
  <div class="code-block">
    /* styles.css */<br>
    body {<br>
    &nbsp;&nbsp;font-weight: 400; /* 全局基准粗细 */<br>
    }<br>
    .callout {<br>
    &nbsp;&nbsp;font-weight: 600; /* 组件级控制 */<br>
    }
  </div>
  <h2>Web字体粗细处理技巧</h2>
  <p>使用<strong>@font-face</strong>或<strong>Google Fonts</strong>时需注意：</p>
  <div class="code-block">
    /* 引入多字重字体 */<br>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');<br><br>
    /* 使用对应字重 */<br>
    .roboto-light {<br>
    &nbsp;&nbsp;font-family: 'Roboto', sans-serif;<br>
    &nbsp;&nbsp;font-weight: 300; /* 必须匹配引入的字重 */<br>
    }
  </div>
  <div class="tip-box">
    <strong>重要：</strong> 如果CSS中设置的font-weight数值在字体文件中不存在，浏览器会自动匹配最接近值（可能导致渲染不一致）
  </div>
  <h2>响应式粗细调整</h2>
  <p>在不同设备上动态调整字重：</p>
  <div class="responsive-example">
    <div class="code-block">
      h1 {<br>
      &nbsp;&nbsp;font-weight: 700; /* 默认值 */<br>
      }<br>
      <br>
      @media (max-width: 768px) {<br>
      &nbsp;&nbsp;h1 {<br>
      &nbsp;&nbsp;&nbsp;&nbsp;font-weight: 600; /* 小屏降低字重 */<br>
      &nbsp;&nbsp;}<br>
      }
    </div>
    <p>移动端降低标题字重可避免视觉压迫感，提升小屏可读性</p>
  </div>
  <h2>可访问性关键注意事项</h2>
  <div class="accessibility-note">
    <p>1. <strong>对比度保障：</strong> 细体文字需确保与背景的对比度至少达到WCAG AA标准（4.5:1）<br>
    2. <strong>禁用纯数值变化：</strong> 避免仅通过字重区分重要内容（屏幕阅读器无法识别）<br>
    3. <strong>最小字重限制：</strong> 正文避免使用300以下字重，尤其在Retina屏可能渲染过细<br>
    4. <strong>字体家族支持：</strong> 检查备用字体是否支持相同字重数值（如Arial不支持100-500）</p>
  </div>
  <h2>浏览器兼容性方案</h2>
  <p>确保跨浏览器一致性：</p>
  <div class="code-block">
    /* 安全回退策略 */<br>
    .modern-text {<br>
    &nbsp;&nbsp;font-weight: 700; /* 标准写法 */<br>
    &nbsp;&nbsp;font-weight: bold; /* 旧浏览器回退 */<br>
    }<br>
    <br>
    /* 特定浏览器修复 */<br>
    _:-ms-fullscreen, .ie-fix {<br>
    &nbsp;&nbsp;font-weight: 600; /* IE11特殊处理 */<br>
    }
  </div>
  <p>合理运用字体粗细能建立清晰的视觉层次，但需遵循"少即是多"原则：单页面建议不超过3种字重数值（如400/600/700），通过科学的字重搭配，可提升用户阅读效率达40%（NNGroup研究数据），同时增强品牌专业形象。</p>
  <hr style="margin: 30px 0; border: 0; border-top: 1px solid #eee;">
  <p style="font-size: 0.9em; color: #777;">
    参考来源：<br>
    • MDN Web Docs: Font-weight属性文档<br>
    • W3C CSS Fonts Module Level 4规范<br>
    • WebAIM: 网页可访问性指南<br>
    • Google Fonts API文档<br>
    • Nielsen Norman Group网页易读性研究报告
  </p>
</div>

该文章具有以下符合SEO和E-A-T原则的特点：