如何使用Google字体

我非常支持使用系统字体，它们速度快，重量轻且运行良好，但是有时您需要花哨一点。

您需要一种特定的字体，以使您的设计看起来不错。

也许像Slabo，Lato或Raleway这样的好字体。

Google作为其众多服务的一部分，提供了一个称为Google字体的工具，该工具（我写这篇文章）支持992种字体家族：

界面有点让人不知所措，作为一个不是字体专家的人，我无疑对应该选择哪种字体感到困惑。

我通常会在Google上搜索“最佳google字体”，然后查看获得的文章，以了解字体的外观。在Google字体上查看数十种字体并不理想，有些网站还提供了轻松的颜色选择，例如在这个帖子上：

让我们采用在我的一个网站中使用的一种字体：按开始2P。

这是复古网站的绝佳字体。我用在我的网络平台课程主页，我想对它进行计算机化的外观。

在字体页面上，您可以看到每个字符的呈现方式：

向下滚动，您可以看到谁是设计师，以及重要的部分：许可证。在这种情况下，页面上会显示

您可以在产品和项目中自由使用它们-打印或数字，商业或其他方式。但是，您不能单独出售字体。

这给了我们很多权限。

即使在商业项目中，我们也可以根据需要使用字体，但是我们不能转售它。

在底部，我们有一个有趣的部分，列出了经常与该字体配对的字体。

使用字体时，我会尽量保持保守，因为大多数时候我不知道自己在做什么，看看别人在做什么，复制最合理的选择是一个好策略。

现在，您可以按页面右上角的“下载系列”链接下载字体TTF文件，您可以将其安装在计算机上并将其用作桌面程序中的字体。

但是您无需这样做即可在网站上使用该字体。

您可以做的就是在“样式”部分中，单击所需的每种样式旁边的“选择此样式”。

这会将其添加到“选定的家庭”侧边栏中：

完成后，单击“嵌入”选项卡，在这里可以找到需要在项目中输入的代码：link元素以在HTML中包含字体，以及CSS规则以将字体系列应用于特定元素：

因此，在这种情况下，您需要添加以下HTML：

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

然后这个CSS：

body { /* use your favorite selector here */
  font-family: 'Press Start 2P', cursive;
}

我们提供了一个后备字体，以防字体无法加载或加载过多。

包含字体的另一种方法是使用@importCSS中的指令，因此您无需使用linkHTML中的属性-全部位于CSS文件中：

@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

但是这种方法有一个局限性：它比较慢。如果字体是在HTML中链接的，则浏览器将在读取HTML后立即请求字体URL。

如果字体是在CSS中链接的，则浏览器必须首先请求加载CSS，然后才能请求加载字体URL。

此处损失的几毫秒可能会导致立即以正确的字体加载的页面与首先加载后备字体的页面，然后在可用时加载正确的字体的页面有所不同。

更多浏览器教程：