我是Bootstrap的新手,目前已经在本地安装了4.1.1 版本(node.js, npm, gulp 和 sass)。
抱歉如果这个问题有点愚蠢,但是我是否需要从Google导入Roboto字体家族呢?还是这个字体已经被Bootstrap导入了?我不想添加任何冗余的CSS。
谢谢! Bob :)
我是Bootstrap的新手,目前已经在本地安装了4.1.1 版本(node.js, npm, gulp 和 sass)。
抱歉如果这个问题有点愚蠢,但是我是否需要从Google导入Roboto字体家族呢?还是这个字体已经被Bootstrap导入了?我不想添加任何冗余的CSS。
谢谢! Bob :)
过去几年,网站字体堆栈确实在不断发展,所以这绝对不是一个坏问题。
我在检查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标签使用Roboto字体系列:h1 { font-family: 'Roboto', sans-serif; }
与依赖系统字体堆栈(可能无法呈现您喜欢的字体)相反,建议采用以下方式:h1 { font-family: Roboto; }
希望这能帮到你,祝你编码愉快!
<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">