我是Bootstrap的新手，目前已经在本地安装了4.1.1 版本(node.js, npm, gulp 和 sass)。
抱歉如果这个问题有点愚蠢，但是我是否需要从Google导入Roboto字体家族呢？还是这个字体已经被Bootstrap导入了？我不想添加任何冗余的CSS。
谢谢！ Bob :)
Bootstrap 4 Roboto字体系列
5
- breezy
2
最好的测试方法是使用字体并查看它是否有效。 - hungrykoala
嗯...不完全是这样。如果你在本地安装了字体，它可能对你有效，而其他人则看不到正确的字体。 - Victoria Ruiz
3个回答
16
过去几年，网站字体堆栈确实在不断发展，所以这绝对不是一个坏问题。
我在检查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 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通过利用内置缩写属性在浏览器中使用系统字体堆栈来实现，这些属性适用于字体简写属性。 更深入的解释可以在本文中找到：The New System Font Stack? 正如文章中所述，依靠系统字体有优点和缺点，并且将呈现的字体是用户机器上可用的第一个字体。
如果您想提供更可靠和一致的方法以确保在您认为合适的地方呈现Roboto字体，则应直接从此处导入字体Google Fonts： Roboto - Google Fonts（或者，如果要避免拉取外部源，则可以设置Roboto字体系列的静态资产，如此处所述：Google Roboto Font - Git Repository）。
在此页面时，单击“已选择Family”，注意如何声明字体族：
font-family: 'Roboto', sans-serif;
请注意，我们将不再使用Roboto内置关键字来表示系统字体堆栈的字体简写属性，而是使用“Roboto”并使用“'Roboto'”来引用从Google Fonts导入的字体系列。 因此，如果您只需在标题中添加此链接：
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
h1 { font-family: 'Roboto', sans-serif; }
h1 { font-family: Roboto; }
希望这能帮到你，祝你编码愉快！
- jstoobz
1
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">
- Victoria Ruiz
3
2请改善这个答案或将其更改为评论。 - Ojonugwa Jude Ochalifu
这是一个非常简单的问题，需要一个简单的答案。 - Victoria Ruiz
1这是正确的答案，为什么它被踩了我不知道。 - Craig
0
这是一个很好的答案，但我可以补充一点，建议下载字体并在本地创建自己的@font-face {}，而不是从谷歌加载字体，以获取所需的字重。这将增加页面加载时间，并防止潜在的破坏，以防万一谷歌或其他停止远程字体加载的情况发生。
- user2013892
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接