如何使用CSS修改Bootstrap按钮内文本的字体样式、大小与字重

最简方案：使用Bootstrap内置工具类 #

Bootstrap 4及以上版本自带字体粗细工具类，无需额外编写CSS，直接给按钮的class属性追加fw-bold即可实现文字加粗效果，修改后的代码如下：

<button type="button-apple" class="btn btn-light btn-lg download-button fw-bold"><i class="fab fa-google-play"></i> Download</button>

如果需要其他粗细程度，可替换为fw-semibold（半粗）、fw-bolder（更粗）等内置类。

自定义方案：通过CSS修改字体全属性 #

如果需要同时自定义字体、字重、字号等样式，可针对你按钮上的download-button自定义类编写样式：

1. 首先确保你自己的CSS文件/样式代码的引入顺序，在Bootstrap CSS的引入语句之后，才能覆盖默认样式
2. 添加如下CSS代码：

.download-button {
  /* 字重数值范围100-900，常用加粗为700 */
  font-weight: 700;
  /* 按需添加字体设置 */
  font-family: "自定义字体名称", system-ui, sans-serif;
  /* 还可调整字号、字间距等属性 */
  /* font-size: 1.1rem; */
  /* letter-spacing: 0.5px; */
}

如果调整加载顺序后样式仍不生效，可在属性值后加!important强制覆盖：font-weight: 700 !important;

常见问题排查 #

• 样式不生效时可按F12打开浏览器开发者工具，选中按钮元素查看「计算样式」面板的font-weight取值，就能定位到是哪条规则覆盖了你的自定义样式，针对性提高选择器优先级即可（比如把选择器改成button.download-button，优先级高于单纯的.download-button）
• 不要随意修改Bootstrap原生的.btn类样式，避免影响全站其他按钮的显示效果

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