如何在元素上强制引导字体样式答案

【问题标题】：How to force Bootstrap font style on element如何在元素上强制引导字体样式
【发布时间】：2022-01-02 08:17:20
【问题描述】：

我有一个网站，我使用 Bootstrap 5 重新设置了样式，并且遇到了一些从其他样式表中获取样式的元素的问题，我正在尝试弄清楚如何覆盖这些样式并应用 Bootstrap 字体堆栈。我可以将字体系列样式应用于所需的元素，但希望应用整个引导程序堆栈。如果没有办法做到这一点，有没有办法单独引用内置的引导字体？即：字体系列：“Helvetica Neue”。我做了一些谷歌搜索，但一切都是为了如何覆盖默认的引导字体，这与我想要的相反。谢谢，

【问题讨论】：

标签： bootstrap-4 bootstrap-5

【解决方案1】：

您应该使用Bootstrap CSS Variable：--bs-body-font-family。这样您就不会重复代码，如果您决定自定义和重新编译 Bootstrap，您也不必更新样式。

/* custom.css */

.custom {
  font-family: serif;
  padding: 0.5rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet">

<p>This is a plain <code>p</code> tag with no class.</p>

<p class="custom">
  This <code>p.custom</code> is rendered with <code>font-family: serif</code> from the external custom.css stylesheet.
</p>

<p class="custom" style="font-family: var(--bs-body-font-family);">
  This <code>p.custom</code> is rendered with <code>font-family: var(--bs-body-font-family)</code> from the style property. This could also be applied in an embedded stylesheet, or an additional external stylesheet loaded after bootstrap.css, which should
  be loaded before custom.css.
</p>

【讨论】：

【解决方案2】：

如果其他人正在寻找如何做到这一点，我可以根据需要使用 font-family 做到这一点；

font-family: 
system-ui,
/* // Safari for macOS and iOS (San Francisco) */
-apple-system,
/* // Windows */
"Segoe UI",
/* // Android */
Roboto,
/* // Basic web fallback */
"Helvetica Neue", Arial,
/* // Linux */
"Noto Sans",
"Liberation Sans",
/* // Sans serif fallback */
sans-serif;

【讨论】：

所以你选择了 2 种主要字体，“Noto Sans”和“Liberation Sans”都在 Linux 中，其余的都是备用字体？为什么 2 主要用于 Linux？我了解“Segoe UI”适用于 Windows。
我只是从默认的引导堆栈中获取样式； getbootstrap.com/docs/4.1/content/reboot/#native-font-stack