我正在创建一个博客站点，我想更改 Bootstrap 字体。在我的标题中的导入 CSS 中，我添加了这个字体
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
如何将其用作我的引导程序默认字体？
【问题讨论】：
标签： html css twitter-bootstrap fonts
使用引导程序 5 SASS
使用 $font-family-base、$font-size-base 和 $line-height-base 属性作为我们应用于“正文”的印刷基础。
【讨论】：
首先，你不能以这种方式将字体导入 CSS。
您可以在 HTML 头部添加此代码：
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
或者像这样在 CSS 文件中导入它：
@import url("http://fonts.googleapis.com/css?family=Oswald:400,300,700");
然后，在你的 css 中，你可以编辑 body 的 font-family：
body {
font-family: 'Oswald', sans-serif !important;
}
【讨论】：
我正在使用基于 Bootstrap 4 的 React Bootstrap。方法是使用 Sass，类似于上面 Nelson Rothermel 的 answer。
这个想法是在您的自定义 Sass 文件中覆盖字体系列的 Bootstraps Sass 变量。如果您使用的是 Google 字体，请确保将其导入自定义 Sass 文件的顶部。
例如，我的自定义 Sass 文件名为 custom.sass，内容如下：
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
$font-family-sans-serif: "Dancing Script", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
我只是简单的在默认值前面加上了我想要的字体，可以在..\node_modules\boostrap\dist\scss\_variables.scss找到。
custom.scss文件的使用方式如图here，从here获取，从here获取...
由于 React 应用程序是由 Create-React-App 实用程序创建的，因此无需像 Gulp 那样经历所有繁琐的工作；我刚刚保存了文件，React 会在后台自动为我编译 Sass。
【讨论】：
这是从谷歌导入字体的最佳和简单的方法，
这也是导入字体的标准方法
将此代码粘贴到您的索引页或标题上
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
另一种方法是像这样在css上导入：
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
在您的 Css 文件中作为此代码
body {
font-family: 'Oswald', sans-serif !important;
}
注意：@import 代码行将是您的 css 文件（style.css，etc.css）中的第一行。它们可以在任何 .css 文件中使用，并且应该始终位于这些文件的第一行。下面是一个例子：
【讨论】：
如果您希望在不修改原始引导文件的情况下应用您选择的字体而不是引导程序中的字体，您可以重新排列 HTML 文档中的标签，以便应用该字体的 CSS 文件在引导程序文件之后调用。这样，由于浏览器首先逐行读取文档，它将读取引导文件并应用它的角色，然后它将读取您的文件并覆盖引导程序中的角色并将其替换为文件中的角色。
【讨论】：
我知道这是一个迟到的答案，但您可以手动更改最新版本 Bootstrap 中的 7 种字体声明：
html {
font-family: sans-serif;
}
body {
font-family: sans-serif;
}
pre, code, kbd, samp {
font-family: monospace;
}
input, button, select, optgroup, textarea {
font-family: inherit;
}
.tooltip {
font-family: sans-serif;
}
.popover {
font-family: sans-serif;
}
.text-monospace {
font-family: monospace;
}
祝你好运。
【讨论】：
如果您使用Sass，则有使用!default 定义的引导变量，您可以在其中找到字体系列。在包含 Bootstrap Sass 文件之前，您可以在自己的 .scss 文件中设置变量，!default 不会覆盖您的。这里很好地解释了!default 的工作原理：https://thoughtbot.com/blog/sass-default。
这是一个未经测试的示例，使用 Bootstrap 4、npm、Gulp、gulp-sass 和 gulp-cssmin 让您了解如何将它们连接在一起。
package.json
{
"devDependencies": {
"bootstrap": "4.0.0-alpha.6",
"gulp": "3.9.1",
"gulp-sass": "3.1.0",
"gulp-cssmin": "0.2.0"
}
}
mysite.scss
@import "./myvariables";
// Bootstrap
@import "bootstrap/scss/variables";
// ... need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list
_myvariables.scss
// For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss\_variables.scss
// These are the defaults, but you can override any values
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;
gulpfile.js
var gulp = require("gulp"),
sass = require("gulp-sass"),
cssmin = require("gulp-cssmin");
gulp.task("transpile:sass", function() {
return gulp.src("./mysite.scss")
.pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError))
.pipe(cssmin())
.pipe(gulp.dest("./css/"));
});
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mysite.css" />
</head>
<body>
...
</body>
</html>
【讨论】：
bootstrap-live-customizer 是一个很好的资源，可用于自定义您自己的引导主题并在您自定义时实时查看结果。使用这个网站很容易编辑字体，然后下载更新的 .css 文件。
【讨论】：
另一种方法是下载source code 然后在variables.less 中更改以下变量
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
然后编译成.css文件
【讨论】：
我认为最好和最干净的方法是自定义下载引导程序。
http://getbootstrap.com/customize/
然后您可以更改排版中的默认字体（在该链接中）。 然后，这将为您提供一个 .Less 文件，您可以在以后对默认值进行进一步更改。
【讨论】：
!important 的方法吗？好像您需要双重覆盖 !important 可能会导致一些问题。
如果您有一个custom.css 文件，在其中，只需执行以下操作：
font-family: "Oswald", Helvetica, Arial, sans-serif!important;
【讨论】：