Question

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

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

如何将此作为我的引导默认字体？

Answer 1

首先，你无法以这种方式将字体导入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);

然后在你的bootstrap.css中你可以编辑body的font-family或添加一个新的：

body {
  font-family: 'Oswald', sans-serif !important;
}

Answer 2

我认为最好和最干净的方法是定制下载bootstrap。

http://getbootstrap.com/customize/

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

Answer 3

如果您有一个custom.css文件，请执行以下操作：

font-family: "Oswald", Helvetica, Arial, sans-serif!important;

Answer 4

另一种方法是下载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文件

Answer 5

bootstrap-live-customizer是一个很好的资源，用于自定义您自己的引导程序主题，并在您自定义时查看结果。使用这个网站很容易编辑字体，然后下载更新的.css文件。

Answer 6

我知道这是一个较晚的答案，但是您可以手动更改最新版本的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;
}

祝你好运。

Answer 7

如果您希望应用选择的字体而不是引导程序中的一种而不修改原始引导程序文件，则可以重新排列HTML文档中的标记，以便CSS文件应用在引导程序之后调用的字体。通过这种方式，由于浏览器先行读取文档，因此它将读取引导文件并应用角色，然后将读取文件并覆盖引导中的角色，并将其替换为文件中的角色。

Answer 8

我正在使用基于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中找到它。

here显示了custom.scss文件的使用方式，该文件从here获得，here从{{3}} ...

由于React应用程序是由Create-React-App实用程序创建的，因此无需像Gulp这样的繁琐工作；我只是保存了文件，React会在后台自动为我编译Sass。

Answer 9

简单易行的方法：

如果你使用谷歌字体。例如：

然后确保在 css 字体系列的末尾添加 !important。

示例：

font-family: 'Rubik', sans-serif !important;

Answer 10

这是从Google导入字体的最佳简便方法，而
这也是导入字体的标准方法

将此代码粘贴到索引页或标题上

.bashrc

另一种方法是像这样在css上导入：

# Source ros setup.bash if present
if [ -f '../devel/setup.bash' ]; then . "../devel/setup.bash";fi

在您的Css文件中使用此代码

   DateTime fromDate = DateTime.Now.AddHours(-10);
            DateTime toDate = DateTime.Now;

            DirectoryInfo directory = new DirectoryInfo(@"\\ServerName\SharedFolder\");
            var files = directory.GetFiles("*.*")  //add this.--
                        .Where(file => file.LastWriteTime >= fromDate && file.LastWriteTime <= toDate);

            foreach (var file in files)
            {
                // add this.
                if (file.Name != "Thumbs.db" && file.Name.StartsWith("~$") == false && file.Name.ToLower().Contains(".xml") == false)
                {
                    string filename = file.Name.ToString();
                    Console.WriteLine(filename);
                }
            }

注意：@import代码行将是css文件（style.css等etc.css）的第一行。它们可以在任何.css文件中使用，并且应始终是这些文件的第一行。以下是一个示例：

如何使用Google的字体更改Bootstrap默认字体系列？

10 个答案: