我是Bootstrap的新手，我在本地安装了4.1.1版本（node.js，npm，gulp和sass）。
很抱歉，如果这是一个愚蠢的问题，但是我是否必须从Google导入Roboto字体家族，或者Bootstrap已经导入了该字体？我不想添加任何多余的CSS。
谢谢！ 鲍勃：）
答案 0 :(得分：4)
过去几年中，用于网站的字体堆栈一直在不断发展，因此，这绝对不是一个坏问题。
检查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符号”！默认；
乍一看，我们注意到引导程序没有从Google字体导入Roboto字体。那么，这是怎么回事？ Bootstrap通过利用与font short hand属性一起使用的内置速记属性来利用系统字体堆栈在浏览器中使用。可以在本文中找到更深入的解释：The New System Font Stack?。如本文所述，依靠系统字体是有利有弊，将要呈现的字体是用户计算机上可用的第一种字体。
如果您想提供一种更可靠，更一致的方法来确保将Roboto字体呈现在您认为合适的位置，那么我可以直接从以下位置的Google字体中导入该字体：Roboto - Google Fonts（也可以设置静态字体）此处所述的Roboto字体家族的资源：Google Roboto Font - Git Repository（如果要避免引入外部资源）。
在此页面上，单击“选定的系列”，并注意如何将字体系列声明为：
font-family：“ 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; }
希望这有助于一些愉快的编码！
答案 1 :(得分：0)
您必须自己导入。
答案 2 :(得分：0)
这是一个很好的答案，但我可以添加它，而不是从Google加载字体，我建议您在本地下载它们，并根据需要的权重创建自己的@ font-face {}。 这将增加您的页面加载时间，并防止在Google发生任何问题或其他会阻止远程字体加载的情况下造成潜在的损坏。