Html 如何使用 Google 的字体更改 Bootstrap 默认字体系列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24075222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the Bootstrap default font family using font from Google?
提问by user3651129
I am creating a blog site and I want to change the Bootstrap font. In my import CSS in header I added this font
我正在创建一个博客站点，我想更改 Bootstrap 字体。在标题中的导入 CSS 中，我添加了此字体
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
How can I use this as my bootstrap default font?
如何将其用作引导程序默认字体？
回答by otopic
First of all you can't import fonts to CSS that way.
首先，您不能以这种方式将字体导入 CSS。
You can add this code in HTML head:
您可以在 HTML 头中添加此代码：
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
or to import it in CSS file like this:
或者像这样在 CSS 文件中导入它：
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
Then in your bootstrap.css you can edit body's font-family or add new one:
然后在您的 bootstrap.css 中，您可以编辑正文的字体系列或添加新的字体系列：
body {
font-family: 'Oswald', sans-serif !important;
}
回答by Nelson Rothermel
If you use Sass, there are Bootstrap variables are defined with !default, among which you'll find font families. You can just set the variables in your own .scssfile before including the Bootstrap Sass file and !defaultwill not overwrite yours. Here's a good explanation of how !defaultworks: https://thoughtbot.com/blog/sass-default.
如果您使用Sass，则会使用定义 Bootstrap 变量!default，您会在其中找到字体系列。您可以.scss在包含 Bootstrap Sass 文件之前在自己的文件中设置变量，而!default不会覆盖您的文件。这是对如何!default工作的一个很好的解释：https: //thoughtbot.com/blog/sass-default。
Here's an untested example using Bootstrap 4, npm, Gulp, gulp-sassand gulp-cssminto give you an idea how you could hook this up together.
这是一个未经测试的示例，使用Bootstrap 4、npm、Gulp、gulp -sass和gulp-cssmin来让您了解如何将它们连接在一起。
package.json
包.json
{
"devDependencies": {
"bootstrap": "4.0.0-alpha.6",
"gulp": "3.9.1",
"gulp-sass": "3.1.0",
"gulp-cssmin": "0.2.0"
}
}
mysite.scss
我的网站.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
_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
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
<html>
<head>
<link rel="stylesheet" type="text/css" href="mysite.css" />
</head>
<body>
...
</body>
</html>
回答by punkologist
I think the best and cleanest way would be to get a custom download of bootstrap.
我认为最好和最干净的方法是获取引导程序的自定义下载。
http://getbootstrap.com/customize/
http://getbootstrap.com/customize/
You can then change the font-defaults in the Typography (in that link). This then gives you a .Less file that you can make further changes to defaults with later.
然后，您可以更改排版中的字体默认值（在该链接中）。这将为您提供一个 .Less 文件，您可以稍后对默认值进行进一步更改。
回答by Ali Gajani
If you have a custom.cssfile, in there, just do something like:
如果您有一个custom.css文件，请在其中执行以下操作：
font-family: "Oswald", Helvetica, Arial, sans-serif!important;
回答by Nicolai
Another way is to download source codethen change following vaiables in variables.less
另一种方法是下载源代码然后更改以下变量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;
And then compile it to .cssfile
然后编译成.css文件
回答by Lewis James-Odwin
The bootstrap-live-customizeris a good resource for customising your own bootstrap theme and seeing the results live as you customise. Using this website its very easy to just edit the font and then download the updated .css file.
该引导程序，实时定制是定制自己引导的主题和看到的结果活得你定制一个很好的资源。使用这个网站很容易编辑字体，然后下载更新的 .css 文件。
回答by LogicalBranch
I know this is a late answer but you could manually change the 7 font declarations in the latest version of Bootstrap:
我知道这是一个迟到的答案，但您可以在最新版本的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;
}
Good luck.
祝你好运。
回答by Ali Sawahreh
If you want the font you chose to be applied and not the one in bootstrap without modifying the original bootstrap files you can rearrange the tags in your HTML documents so your CSS files that applies the font called after the bootstrap one. In this way since the browser reads the documents line after line first it will read the bootstrap files and apply it roles then it will read your file and override the roles in the bootstrap and replace it with the ones in your file.
如果您希望在不修改原始引导文件的情况下应用您选择的字体而不是引导程序中的字体，则可以重新排列 HTML 文档中的标签，以便应用在引导程序后调用的字体的 CSS 文件。这样，由于浏览器首先逐行读取文档，它将读取引导程序文件并应用它的角色，然后它将读取您的文件并覆盖引导程序中的角色并将其替换为您文件中的角色。
回答by Shaikh Nadeem
This is the best and easy way to import font from google and
this is also a standard method to import font
这是从谷歌导入字体的最好和最简单的方法，
这也是导入字体的标准方法
Paste this code on your index page or on header
将此代码粘贴到您的索引页或标题上
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
other method is to import on css like this:
另一种方法是像这样导入css：
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
on your Css file as this code
在您的 CSS 文件中作为此代码
body {
font-family: 'Oswald', sans-serif !important;
}
Note : The @import code line will be the first lines in your css file (style.css, etc.css). They can be used in any of the .css files and should always be the first line in these files. The following is an example:
注意：@import 代码行将是您的 css 文件（style.css 等.css）中的第一行。它们可以在任何 .css 文件中使用，并且应该始终位于这些文件的第一行。下面是一个例子：
