我正在使用 Proxima Nova 字體進行角度應用
樣式檔案
@import url('https://fonts.googleapis.com/css?family=Proxima Nova');
嘗試使用引導變數覆寫根字體，如下所示
$variable-prefix: bs-;
$font-family-sans-serif: 'proxima-nova', sans-serif;
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
加載應用程式時從引導核心獲取默認值
:root {
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
變數覆寫不起作用
uj5u.com熱心網友回復：
我的問題是我需要在 angular.json 檔案中的 style.scss 檔案之前提供 bootstrap.min.css 檔案
"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
樣式檔案
@import "../scss/theme.scss";
主題.scss
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
@import "./custom_variables.scss";
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
// 5. Add additional custom code here
客戶變數
$variable-prefix: bs-;
$font-family-sans-serif: 'proxima-nova', sans-serif;
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
uj5u.com熱心網友回復：
你在這里有幾個問題。
您的字體系列被定義為
proxima-nova但正如您在這里看到的，它實際上是Proxima Nova. 使用正確的名稱。您當前只更新 SCSS 變數（帶 $）而不是 CSS 變數（帶 --）。由于
$font-family-sans-serif未使用（至少在示例中），因此它不會生效，因為它只是定義了。
如果你想用 sans serif 型別替換基本字體，你應該像這樣替換 CSS 變數中的 SCSS 變數：
:root {
--bs-font-sans-serif: $font-family-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
如果你不想在這里使用變數，你可以在那里添加“Proxima Nova”。
很久沒有使用引導程式了，但我的主要作業是 CSS SCSS。未經測驗和未經檢查。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320861.html