/* css/custom.css */ /* 1. 在 :root 选择器中定义 CSS 变量这是 Bootstrap 用来存储全局设计令牌的地方。通过在这里重新定义，我们可以覆盖 Bootstrap 的默认值。 */ :root { /* * 定义全局基础字体族 * 将你提供的字体栈赋值给 --font-family-sans-serif 变量。 * 注意：如果字体名中包含空格（如 "SF Pro SC"），必须用引号括起来。 */ --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text", "Helvetica Neue", Helvetica, "PingFang SC", "Segoe UI", Roboto, "Hiragino Sans GB", arial, "microsoft yahei ui", "Microsoft YaHei", SimSun, sans-serif; /* * 将 Bootstrap 的基础字体变量设置为我们上面定义的无衬线字体栈。 * Bootstrap 内部会使用 --font-family-base 变量来设置等基础元素的字体。 */ --font-family-base: var(--font-family-sans-serif); /* (可选) 你可以在这里同时定义其他全局样式变量 */ /* 例如，设置一个更柔和的默认文字颜色 */ --body-color: #333; /* 例如，设置一个稍大的基础字体大小 */ --font-size-base: 1rem; /* 例如，增加行高以提高可读性 */ --line-height-base: 1.6; } /* 2. (可选但推荐) 将变量应用到 body 元素虽然 Bootstrap 的 _reboot.scss 已经做了这件事，但在这里显式地应用一遍可以确保万无一失，并且让你清楚地知道这些样式被应用到了哪里。 */ body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--body-color); }