Bootstrap 4 Roboto 字体系列
Bootstrap 4 Roboto font family
我是 Bootstrap 的新手，我在本地安装了 4.1.1 版（node.js、npm、gulp 和 sass）。
抱歉，这是一个愚蠢的问题，但我是否必须从 Google 导入 Roboto 字体系列，或者该字体是否已由 Bootstrap 导入？我不想添加任何多余的 css.
谢谢！
鲍勃 :)
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">
网站的字体堆栈在过去几年中确实在不断发展，所以这绝对不是一个坏问题。
我检查 bootstrap@4.1.1 imports/implements 框架中 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 Symbol";
我们可以看出 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" !default;
乍一看，我们注意到 bootstrap 没有从 Google 字体导入 Roboto 字体。那么，这是怎么回事？ Bootstrap 通过利用 built-in shorthand 与字体简写 属性 一起使用的属性，利用系统字体堆栈在浏览器中使用。更多in-depth的解释可以参考这篇文章：The New System Font Stack?。如文章中所述，依赖系统字体有利有弊，将呈现的字体是用户计算机上可用的第一种字体。
如果您想提供一种更可靠和一致的方式来确保在您认为合适的地方呈现 Roboto 字体，那么我会直接从 Google 此处找到的字体导入字体：Roboto - Google Fonts (or you can setup static assets for the Roboto font family as described here: Google Roboto Font - Git Repository ，如果您想避免引入外部资源）。
在此页面上，单击 "Family Selected" 并注意如何将 font-family 声明为：
font-family: 'Roboto', sans-serif;
请注意，我们将如何不再依赖 built-in 字体关键字 shorthand 属性 通过使用 Roboto 的系统字体堆栈，而是使用 'Roboto' 引用从 Google 字体导入的字体系列。因此，如果您只需将此 link 添加到 header:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
您现在可以声明所有 h1 标签以使用 Roboto 字体系列：
h1 { font-family: 'Roboto', sans-serif; }
而不是像这样依赖系统字体堆栈（并且可能不呈现您喜欢的字体）：
h1 { font-family: Roboto; }
希望这对编码有所帮助！
这是一个很好的答案，但我可以补充一点，而不是从 google 加载字体，我建议在本地下载它们并为您需要的权重创建您自己的 @font-face {}。
这将增加您的页面加载时间，并防止在 google 出现任何问题或其他会停止远程字体加载的情况下发生潜在的破坏。
我是 Bootstrap 的新手，我在本地安装了 4.1.1 版（node.js、npm、gulp 和 sass）。
抱歉，这是一个愚蠢的问题，但我是否必须从 Google 导入 Roboto 字体系列，或者该字体是否已由 Bootstrap 导入？我不想添加任何多余的 css.
谢谢！ 鲍勃 :)
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">
网站的字体堆栈在过去几年中确实在不断发展，所以这绝对不是一个坏问题。
我检查 bootstrap@4.1.1 imports/implements 框架中 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 Symbol";
我们可以看出 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" !default;
乍一看，我们注意到 bootstrap 没有从 Google 字体导入 Roboto 字体。那么，这是怎么回事？ Bootstrap 通过利用 built-in shorthand 与字体简写 属性 一起使用的属性，利用系统字体堆栈在浏览器中使用。更多in-depth的解释可以参考这篇文章：The New System Font Stack?。如文章中所述，依赖系统字体有利有弊，将呈现的字体是用户计算机上可用的第一种字体。
如果您想提供一种更可靠和一致的方式来确保在您认为合适的地方呈现 Roboto 字体，那么我会直接从 Google 此处找到的字体导入字体：Roboto - Google Fonts (or you can setup static assets for the Roboto font family as described here: Google Roboto Font - Git Repository ，如果您想避免引入外部资源）。
在此页面上，单击 "Family Selected" 并注意如何将 font-family 声明为：
font-family: 'Roboto', sans-serif;
请注意，我们将如何不再依赖 built-in 字体关键字 shorthand 属性 通过使用 Roboto 的系统字体堆栈，而是使用 'Roboto' 引用从 Google 字体导入的字体系列。因此，如果您只需将此 link 添加到 header:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
您现在可以声明所有 h1 标签以使用 Roboto 字体系列：
h1 { font-family: 'Roboto', sans-serif; }
而不是像这样依赖系统字体堆栈（并且可能不呈现您喜欢的字体）：
h1 { font-family: Roboto; }
希望这对编码有所帮助！
这是一个很好的答案，但我可以补充一点，而不是从 google 加载字体，我建议在本地下载它们并为您需要的权重创建您自己的 @font-face {}。 这将增加您的页面加载时间，并防止在 google 出现任何问题或其他会停止远程字体加载的情况下发生潜在的破坏。