时间戳

首页 > 解决方案 > Bootstrap 4 Roboto 字体系列

html - Bootstrap 4 Roboto 字体系列

问题描述

我是 Bootstrap 的新手，我在本地安装了 4.1.1 版（node.js、npm、gulp 和 sass）。

抱歉，如果这是一个愚蠢的问题，但我是否必须从 Google 导入 Roboto 字体系列，还是 Bootstrap 已经导入了该字体？我不想添加任何多余的 CSS。

谢谢！鲍勃:)

标签： htmlbootstrap-4webfonts

解决方案

在过去的几年中，网站的字体堆栈肯定在不断发展，所以这绝对不是一个坏问题。

我检查 bootstrap@4.1.1 如何在框架中导入/实现 Roboto 字体的第一种方法是打开 bootstrap.css 文件，该文件位于此处：

node_modules/bootstrap/dist/css/bootstrap.css

然后对术语“Roboto”执行快速文本搜索，看看文件中是否有任何匹配项。完成此操作后，您将看到第 34 行产生了第一个匹配项，并且如下所示：

--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI象征”;

我们可以看出 Roboto 字体有某种类型的实现。让我们仔细检查一下编译分发就绪资产的原始 scss 文件，看看它是如何在那里实现的，以便进一步了解，可以在这里找到：

node_modules/bootstrap/scss/_variables.scss

然后我们将对“Roboto”进行另一个快速文本搜索，它会在第 234 行产生 1 个结果，如下所示：

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol “ ！默认;

乍一看，我们注意到 bootstrap 没有从 Google Fonts 导入 Roboto 字体。那么，这是怎么回事？Bootstrap 正在利用与字体简写属性一起使用的内置简写属性，从而在浏览器中使用系统字体堆栈。可以在这篇文章中找到更深入的解释：新系统字体堆栈？. 如文章中所述，依赖系统字体有利有弊，将呈现的字体是用户机器上第一个可用的字体。

如果您想提供一种更可靠和一致的方式来确保在您认为合适的位置呈现 Roboto 字体，那么我将直接从此处找到的 Google 字体导入字体：Roboto - Google 字体（或者您可以为 Roboto 设置静态资产此处描述的字体系列：Google Roboto Font - Git Repository，如果您想避免引入外部源）。

在此页面上，单击“Family Selected”并注意您将如何将 font-family 声明为：

字体系列：“机器人”，无衬线；

请注意，我们将不再依赖于通过使用 Roboto 系统字体堆栈的字体速记属性的内置关键字，而是使用“Roboto”来引用从 Google Fonts 导入的字体系列。因此，如果您只是在标题中添加此链接：

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

您现在可以声明所有 h1 标签以使用 Roboto 字体系列，如下所示：

h1 { font-family: 'Roboto', sans-serif; }

而不是依赖系统字体堆栈（并且可能不呈现您的首选字体），如下所示：

h1 { font-family: Roboto; }

希望这有助于一些愉快的编码！

推荐阅读