Bootstrap 4 Roboto 字体系列答案

【问题标题】：Bootstrap 4 Roboto font familyBootstrap 4 Roboto 字体系列
【发布时间】：2021-03-22 22:04:24
【问题描述】：

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

抱歉，这是一个愚蠢的问题，但我是否必须从 Google 导入 Roboto 字体系列，或者该字体是否已由 Bootstrap 导入？我不想添加任何多余的 css。

谢谢！鲍勃:)

【问题讨论】：

最好的测试方法是使用字体，看看它是否有效。
嗯……不完全是。如果您在本地安装了该字体，它可能对您有用，而其他人将看不到正确的字体。

标签： html bootstrap-4 webfonts

【解决方案1】：

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

我检查 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 符号" !default;

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

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

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

font-family: 'Roboto', sans-serif;

请注意，我们将不再使用 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; }

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

【讨论】：

【解决方案2】：

Bootstrap 不包含任何字体，它依赖于系统字体。因此，如果您想使用任何 Google 字体（或其他字体），您必须自己导入。

为此，您可以添加：

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

Google 会在您导入字体时提出一些其他建议，这将有助于提高性能：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

【讨论】：

请改进此答案或将其更改为评论
这是一个很简单的问题，需要一个简单的答案。
这是正确答案，为什么它被否决了我无法理解

【解决方案3】：

这是一个很好的答案，但我可以补充一点，而不是从谷歌加载字体，我建议在本地下载它们并为你需要的权重创建自己的 @font-face {}。这将增加您的页面加载时间，并且可以防止潜在的损坏，以防谷歌出现任何问题或其他会停止远程字体加载的事情。

【讨论】：