如何在Bootstrap中设置字体样式？求助解决字体族配置问题

你遇到的问题核心是Bootstrap没有内置f-Arial这个类，需要自行定义对应的CSS样式来实现字体族设置，具体方案如下：

• 首先添加自定义CSS规则，明确f-Arial类的字体属性：

  .f-Arial {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  }
  

  使用字体栈是为了兼容不同系统——当设备没有Arial字体时，会自动降级显示备选字体，避免出现字体错乱。

• 确保你的自定义CSS代码是在Bootstrap的CSS之后引入的，这样自定义样式才不会被Bootstrap的默认样式覆盖。

• 额外注意：部分浏览器中<select>元素的字体不会自动继承父元素样式，如果下拉框字体仍未生效，可补充以下规则强制继承：

  .f-Arial select {
    font-family: inherit;
  }
  

修改后的完整代码示例：

<!-- 先引入Bootstrap CSS -->
<link href="bootstrap.css" rel="stylesheet">
<!-- 再引入自定义CSS -->
<style>
.f-Arial {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.f-Arial select {
  font-family: inherit;
}
</style>

<div class="float-start my-2 f-Arial">
    <label for="maleFemale">Gender:</label>
    <select name="sex" id="maleFemale">
        <option value="">Select Gender:</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>

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