在CSS中设置文字加粗是一个常见的需求，通常可以通过多种方式实现，每种方式适用于不同的场景和需求，下面将详细介绍几种常用的方法，包括使用font-weight属性、利用继承机制、结合伪类以及使用字体文件等，并辅以示例代码和注意事项,帮助开发者全面掌握文字加粗的设置技巧。
最直接的方法是使用font-weight属性，该属性用于定义字体的粗细程度，其值可以是关键字、数字或百分比，关键字包括normal（默认值，相当于400）、bold（粗体，相当于700）、bolder（更粗）和lighter（更细），数字值范围通常从100到900，以100为间隔递增，其中400对应normal，700对应bold，百分比值则相对于父元素的font-weight计算，例如200%相当于将父元素的粗细翻倍，需要注意的是，并非所有字体都支持所有粗细值，具体效果取决于字体文件本身的设计，设置段落文字加粗的代码为p { font-weight: bold; }或p { font-weight: 700; }，两者效果相同，如果需要更精细的控制，可以使用数字值，如font-weight: 500;,这适用于需要介于常规和粗体之间的场景。
利用CSS的继承机制可以简化加粗操作，在HTML中，某些标签（如<h1>到<h6>、<strong>、<b>）默认具有加粗效果，这些标签的font-weight属性通常被设置为bold或700，通过为这些标签设置样式，可以间接实现文字加粗。strong { font-weight: 900; }可以让强调标签的文字变得更粗，如果父元素设置了font-weight，子元素会继承该值，除非子元素明确覆盖。.container { font-weight: bold; }会使容器内的所有文字默认加粗，而.container p { font-weight: normal; }则可以让段落文字恢复常规粗细，开发者需要根据实际需求选择是否利用继承,避免不必要的样式冲突。
第三种方法是结合CSS伪类实现动态加粗效果。hover伪类可以在鼠标悬停时改变文字粗细，适用于交互式设计，示例代码为a:hover { font-weight: bold; }，当用户将鼠标移到链接上时，文字会自动加粗。focus伪类也可以用于表单元素，如input:focus { font-weight: bold; }，在输入框获得焦点时突出显示文字，需要注意的是，伪类的使用应基于用户体验,避免过度使用导致视觉干扰。
使用自定义字体文件（如WOFF2、TTF）可以实现更丰富的加粗效果，某些字体家族（如Open Sans、Roboto）提供了多个字重变体，如Regular、Bold、Black等，通过@font-face规则引入这些字体变体，并设置相应的font-weight，可以确保文字加粗效果更加精细。@font-face { font-family: 'MyFont'; src: url('myfont-bold.woff2') format('woff2'); font-weight: 700; }定义了一个名为MyFont的粗体字体，之后通过h1 { font-family: 'MyFont'; font-weight: 700; }应用该字体，这种方法适用于需要高度定制化设计的项目,但需要注意字体文件的加载性能和版权问题。
在实际开发中，还需要考虑浏览器的兼容性和默认样式重置，不同浏览器对font-weight的解析可能存在差异，尤其是对于非关键字的值，建议优先使用bold或700等广泛支持的值，并通过测试确保跨浏览器一致性，使用CSS重置（如Normalize.css或Reset CSS）可以消除不同浏览器的默认样式差异,确保加粗效果的一致性。
为了更直观地展示不同font-weight值的效果,以下是一个简单的对比表格：
| font-weight值 | 关键字 | 效果描述 | 适用场景 |
|---|---|---|---|
| 100 | thin | 极细 | 装饰性文字 |
| 400 | normal | 常规（默认） | 段落、正文内容 |
| 700 | bold | 粗体 | 强调文字、标题 |
| 900 | black | 极粗 | 需要强烈视觉冲击的标题 |
关于相关问答FAQs,以下是两个常见问题及解答：
问题1：为什么设置了font-weight: bold;后文字没有变粗？
解答：这通常是由于字体文件本身不支持该粗细值导致的，某些字体（如系统默认的Arial、Times New Roman）仅提供有限的字重变体（如常规和粗体），解决方案包括：更换支持更多字重的字体（如Google Fonts中的Roboto），或使用font-weight: 900;等更高数值尝试；检查是否有其他CSS规则覆盖了font-weight设置；确保没有使用!important强制覆盖样式。
问题2：如何让部分文字在加粗的同时保持字体大小不变？
解答：可以通过嵌套标签或<span>元素实现局部加粗，而无需改变字体大小。<p>这是一段<span style="font-weight: bold;">加粗</span>的文字。</p>，其中<span>仅对“加粗”二字应用加粗样式，而段落的其他部分保持原有字体大小，这种方法适用于需要精确控制文本样式的场景,避免全局样式影响。
