Bootstrap 4 Roboto字体家族

Question

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

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

谢谢！鲍勃:)

Answer 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 Symbol “！默认；

乍一看，我们注意到引导程序没有从Google字体导入Roboto字体。那么，这是怎么回事？Bootstrap通过利用与font short hand属性一起使用的内置速记属性来利用系统字体堆栈在浏览器中使用。可以在本文中找到更深入的解释：新系统字体堆栈？。如本文所述，依靠系统字体是有利有弊，将要呈现的字体是用户计算机上可用的第一种字体。

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

在此页面上时，单击“选定的家族”，并注意如何将字体家族声明为：

字体家族：“ Roboto”，无衬线；

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

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

现在，您可以声明所有h1标签以使用Roboto字体家族，例如：

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

而不是像这样依赖系统字体栈（并且可能不呈现您的首选字体）：

h1 { font-family: Roboto; }

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

Answer 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">