如何让文本更粗？已尝试font-weight: bolder仍需更粗效果

我目前没有其他问题，但需要让文本显示得更粗。以下是我使用的CSS代码：

.txt {
     font-weight: bolder;
     justify-content: left;
     text-align: left;
     margin-top: 100px;
    /* font-family: 'Redwinger Personal Use', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    */
     color: rgb(0, 0, 0);
     margin-bottom: 750px;
     margin-left: 25px;
}

我已经尝试使用font-weight: bolder属性，但还是想要更粗的文本效果，请问是否有可行的解决方法？

解决方法 #

1. 直接使用数值化的font-weight值 #

bolder是相对值，只会在父元素字重基础上提升一级，改用数值能精准控制粗细程度：

.txt {
  font-weight: 900; /* 主流字体支持的最粗值，范围100-900，数值越大越粗 */
  /* 其余样式保持不变 */
}

注意：部分字体仅支持特定数值（比如400正常、700加粗），如果设置900但字体无对应字重，浏览器会自动 fallback 到最接近的可用粗度。

2. 启用自定义字体的粗体字重 #

你的代码注释掉了Redwinger Personal Use字体，如果要使用它，得确保该字体本身包含粗体/特粗体的字重文件，并且正确引入：

@font-face {
  font-family: 'Redwinger Personal Use';
  src: url('redwinger-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Redwinger Personal Use';
  src: url('redwinger-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

之后取消.txt里的字体注释，并设置对应数值字重，就能用到字体原生的特粗样式。

3. 用text-shadow模拟加粗（应急方案） #

如果字体本身没有更粗的字重，可以用多层文字阴影叠加实现视觉加粗：

.txt {
  font-weight: bolder;
  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
  /* 阴影层数、模糊半径可按需调整，颜色需和文本颜色一致 */
}

这种方法是视觉效果模拟，不是真正的字体字重，可能导致文本边缘发虚，适合临时场景。

内容的提问来源于stack exchange，提问作者Ayman