Google Fonts 的 @import 在 Bootstrap 项目中常失效，因加载顺序、SCSS 编译机制及 @import 行为差异导致字体被忽略；最可靠方式是直接在 HTML <head> 中用 <link> 引入，并通过 :root 覆盖 --bs-font-sans-serif 变量生效。
Google Fonts 的 @import 写法在 Bootstrap 项目里为什么没生效
直接在 style.css 或 main.scss 顶部写 @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');，字体大概率不生效——Bootstrap 的 CSS 加载顺序、SCSS 编译机制、以及 @import 在 CSS 和 SCSS 中行为不同，三者叠加导致字体声明被忽略或覆盖。
实操建议：
- 如果用原生 CSS（无构建工具），把
@import放在所有 Bootstrap CSS 引入 之前，且确保它在<head>最顶部 - 如果用 SCSS（比如 Bootstrap 官方源码或 Create React App + sass），不要用
@import，改用@use或直接在 HTML 中加载 - 更稳的方式：跳过 CSS 层级，直接在 HTML 的
<head>插入<link>标签（见下一条）
在 HTML 中用 <link> 加载 Google Fonts 是最可靠方式
这是唯一不受构建流程、CSS 优先级、SCSS 编译影响的方案。尤其当你用 Bootstrap CDN、Vite、Next.js 或任何预编译 CSS 的环境时，它都成立。
实操建议：
- 去 Google Fonts 挑好字体（比如
Roboto），选中字重（如 400, 500, 700），点击右下角 “<link>” 标签，复制整段 <code><link> - 把它粘贴到 HTML 的
<head>中，放在<link rel="stylesheet" href="bootstrap.min.css">之前 - 然后在 Bootstrap 的自定义 CSS 或内联样式中，用
font-family: 'Roboto', sans-serif;即可生效
注意：display=swap 必须保留，否则字体加载期间文字会空白（FOIT）；去掉它可能让页面首屏“闪一下”。
如何让 Bootstrap 组件（如 btn、navbar）自动用上新字体
Bootstrap 默认用 font-family: var(--bs-font-sans-serif)，而这个 CSS 变量默认是系统字体栈。你不能只改 body，得覆盖变量本身，否则按钮、标题、表单等组件仍用旧字体。
实操建议：
- 在你的自定义 CSS 文件（或
<style>块）里，加这段：
:root {
--bs-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
这样所有依赖该变量的 Bootstrap 组件都会继承新字体。别只写 body { font-family: ... }——那对 .btn 这类有自己 font-family 声明的元素无效。
如果用了 SCSS，也可以在引入 Bootstrap 前，先定义变量：
$font-family-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; @import "bootstrap/scss/bootstrap";
中文支持和字体加载性能容易被忽略
Google Fonts 对中文支持有限，Chinese+Font 类别下的字体（如 Noto+Sans+SC）体积大、CDN 延迟高，直接套用会导致页面渲染变慢甚至布局偏移（CLS）。
实操建议：
- 中文项目慎用
Noto+Sans+SC全量加载；改用子集：加参数&display=swap&subset=chinese-simplified，但更要紧的是限制字重，比如只加wght@400;700 - Bootstrap 5.3+ 支持
font-display: swap，但 Google Fonts 的&display=swap参数才是实际起效的关键，漏掉它，字体加载时文字会不可见 - 用 Chrome DevTools 的
Network → Fonts标签确认字体是否真正加载成功，别只看 CSS 是否写了font-family
字体不是“设了就完事”，它卡在渲染流水线里，一个参数错，用户看到的就是空白或回退字体。
