logo标签列表

如何使用来自Google的字体更改Bootstrap默认字体族？

htmlcsstwitter-bootstrapfonts
101

我正在创建一个博客网站，想要更改Bootstrap字体。在我的头部导入的CSS中，我添加了这个字体。

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

我该如何将这个设为我的Bootstrap默认字体？

14个回答
105
首先，您不能以那种方式将字体导入到CSS中。
您可以在HTML head中添加此代码：
<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元素的字体族：

body {
  font-family: 'Oswald', sans-serif !important;
}
13
这种方法忽略了Bootstrap 4使用的复杂主题设置方法：https://getbootstrap.com/docs/4.4/getting-started/theming/ - AWhitford
也许这是第三步，但前两步是确保最终用户在其系统上没有可用字体时获得所需字体的有效方法。 - Asamoah
你能解释一下在Oswald后面附加的400、300、700是什么意思吗？ - Digin Dominic
2
@DiginDominic 这些是字体权重。最好只包括计划使用的权重。 - tdy
96
如果你使用Sass，那么Bootstrap变量会被定义为!default，其中包括字体系列。你可以在自己的.scss文件中设置这些变量，然后引入Bootstrap Sass文件，!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>
17
这应该是被认可的答案。Bootstrap已经精确地构建了这个功能，以便您不必突破他们的代码，然后在未来几年升级时失去所有更新。阅读此内容的任何人，请忽略建议编辑源代码的回答！ - DoubleA
2
@DoubleA：这几年我学到了一些东西。你激励我进一步扩展我的回答，希望现在更有用了。 - Nelson Rothermel
35

我认为最好、最干净的方式是获取自定义下载的Bootstrap。

http://getbootstrap.com/customize/

然后您可以更改“排版”中的默认字体（在该链接中）。 这将为您提供一个.Less文件，稍后您可以进一步更改默认值。

6
谁给我点了-1，能告诉我为什么这不是一个有效的解决方案吗？ - punkologist
正如 punkologist 所指出的那样，这是自定义 Bootstrap 的正确且受支持的解决方案。请阅读文档并遵循提供的链接。 - Jan Nielsen
这里有一篇关于自定义Bootstrap的好文章。请点击链接查看：http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/。 - Jan Nielsen
29
我会创建一个覆盖样式表，而不是下载自定义的Bootstrap...这样你的Bootstrap就容易升级到未来的开发人员手中。 - RayLoveless
@RayLoveless，你能解释一下如何不使用!important来实现吗？如果需要双重覆盖!important可能会导致一些问题。 - Ruan Carlos
2
你可以设置变量，然后导入Bootstrap以覆盖默认值。例如：`$primary: purple; $secondary: goldenrod; $danger: blue;@import "node_modules/bootstrap/scss/bootstrap";` - Mark
19
如果您有一个custom.css文件，在其中只需进行以下操作：
font-family: "Oswald", Helvetica, Arial, sans-serif!important;
12

这个页面上大多数答案似乎建议自定义Bootstrap变量。

然而，对于Bootstrap 5来说，首选的方法似乎是使用CSS变量。https://getbootstrap.com/docs/5.1/customize/css-variables/

例如，body字体系列在_reboot.scss中设置为使用CSS变量bs-body-font-family，该变量在_root.scss中设置。因此，您可以重新定义此CSS变量：

body { --bs-body-font-family: 'YOUR GOOGLE FONT'; }

9
6
另一种方法是下载源代码，然后在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文件。

1
请勿覆盖 Bootstrap，而是创建一个 .css 文件来覆盖某些值。这样就可以更改字体了。使用 CSS 并不会有太大问题，但通常编写 CSS 的人会转向 JavaScript，这可能会带来源代码的破坏。我可能有点苛刻，但良好的实践是必要的。 - user1752532
1
@gerdi，我的意思是，如果您覆盖这些变量的值，唯一的变化将只出现在前面，而不是类名称，这将影响到JavaScript。 - Nicolai
从我所了解的来看，Bootstrap和Bootwatch是开发过程的起点。当你开始开发时，特别是在团队中工作的情况下，需要考虑SoC（关注点分离）。当一个人开始覆盖DL源代码时，通常会导致意大利面条式代码的出现，开发人员开始争论“他们”的.css文件在head标签中的位置。 - user1752532
@gerdi，是的，这是真的（SoC），但我的回答是关于“如何更改引导程序默认字体系列”的问题 - 在这种情况下，主要单词是“默认”。因此，我的答案不会有任何影响。还要考虑到当您在团队中工作时，只需提交40个文件中的一个（variabless.less）即可编译整个引导程序。- 这是SoC吗？是的。 - Nicolai
1
永远不要编辑源代码。当您在未来进行升级时，您将失去所有更改。这是正确的答案：https://dev59.com/HmAf5IYBdhLWcg3w_W5j#29952126 - DoubleA
显示剩余2条评论
4

Bootstrap-live-customizer 是一个优秀的资源，能够帮助你自定义 Bootstrap 主题，并实时查看自己的更改结果。在这个网站上，你可以轻松地编辑字体并下载更新后的 .css 文件。

4

我知道这个答案晚了，但你可以在最新版本的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;
}

祝你好运。

3
我正在使用基于Bootstrap 4的React Bootstrap。该方法是使用Sass，类似于Nelson Rothermel在上面的答案。
其思路是在您的自定义Sass文件中覆盖Bootstrap的Sass变量以设置字体系列。如果您使用Google Fonts，则请确保在自定义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文件，请参见此处，该示例源自此处，后者源自此处...

由于React应用程序是通过Create-React-App实用程序创建的，因此无需像Gulp那样处理所有冗杂的工具；我只需保存文件，React将在幕后自动为我编译Sass。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接