📌  相关文章
📜  如何在CSS中使用Google字体

📅  最后修改于: 2020-11-05 09:36:09             🧑  作者: Mango

如何在CSS中使用Google字体?

为网页选择正确的字体是任何网页设计的重要方面。使用Google字体是有优势的，因为我们为网站提供了精美的字体。 Google字体API使每个人都可以更轻松快捷地使用网络字体。这些字体已在各种浏览器配置上经过测试。

无需进行任何编程，我们只需要在HTML文档中添加一个特殊的样式表链接，然后以CSS样式引用我们选择的字体系列即可。

有两个步骤可以开始使用Google字体API，如下所示：

  • 首先，我们必须添加样式表链接以请求所需的Web字体。
  • 然后，我们可以在样式表中或通过内联样式使用所需的Web字体设置元素的样式。
.css-selector {
font-family: 'Font Name', serif;
}

Or,


Your text

请注意，以CSS样式指定网络字体时，我们应始终提及至少一种后备网络安全字体，以避免出现意外行为。我们可以将常规字体名称(如sans-serif或serif)添加到列表的末尾，以便浏览器在需要时将其用作默认字体。

使用@import

我们可以从网络字体服务(例如Google字体)中导入字体系列。将其放置在

Hello World

font-family: Roboto;

Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.

输出量

示例-使用@import规则












 Hello World 




 font-family: Lobster; 


 Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.

输出量

例

在此示例中，我们使用的字体家族名称Chelsea Market处有一个空格，因此我们将这个空格替换为加号(+)。













Hello World


font-family: Chelsea Market;


 Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.

输出量

例

在此示例中，我们使用由竖线(|)字符分隔的多个字体系列名称。













Hello World




font-family: Great Vibes;


 Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.






font-family: Inconsolata;


 Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.







font-family: Satisfy;


 Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.

输出量