Bootstrap 4 Roboto字体系列

Question

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

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

谢谢!Bob :)

Answer 1

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

为此，您可以添加：

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

当你导入字体时，谷歌会提供一些其他的建议，这将有助于提高性能：

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

Answer 2

在过去的几年里，网站的字体堆栈确实在不断发展，所以这绝对是一个不错的问题。

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

节点模块/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文件，并查看它是如何在那里实现的，以获得更深入的见解，可以在这里找到：

节点模块/bootstrap/scss/_varables.scss

然后，我们将对"Roboto“进行另一次快速文本搜索，结果是在第234行找到一个结果，如下所示：

$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字体导入Roboto字体。那到底是怎么回事？Bootstrap通过利用与字体速记属性一起工作的内置速记属性来利用浏览器中使用的系统字体堆栈。可以在本文中找到更深入的解释：The New System Font Stack?。正如文章中提到的，依赖系统字体有优缺点，将呈现的字体是用户机器上可用的第一种字体。

如果你想提供一种更可靠和一致的方法来确保Roboto字体在你认为合适的地方渲染，那么我可以直接从谷歌字体中导入字体：Roboto - Google Fonts (或者你可以为Roboto字体家族设置静态资源，如下所述：Google Roboto Font - Git Repository，如果你想避免引入外部来源)。

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

字体系列：'Roboto'，sans-serif；

请注意，我们将不再通过使用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 3

这是一个很好的答案，但我可以补充说，我建议在本地下载字体并创建您自己的@font-face {}，以获得所需的权重，而不是从google加载字体。这将增加您的页面加载时间，并将防止潜在的破坏，以防止任何与谷歌或其他东西出问题，将停止远程字体加载。