如何在元素上强制使用 Bootstrap 字体样式

Question

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

Answer 1

如果其他人正在寻找如何做到这一点，我可以根据需要使用字体系列来做到这一点；

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;

Answer 2

您应该使用 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>

如何在元素上强制使用 Bootstrap 字体样式

How to force Bootstrap font style on element

bootstrap-4

bootstrap-5