如何使用 Google 和插件使用 Google 字体！
已发表: 2021-07-30
如果您是设计师，您更有可能将排版视为任何网站设计的基础。 不仅选择字体，还为网页的可读性提供优势。
什么是排版？
排版就是选择行长、磅值、行距、字体和调整字母组之间的间距。
为什么谷歌字体是一个明确的选择？
有时互联网上的标准字体会让任何人看到它们，但随着时间的推移，网页设计师和开发人员被迫限制他们的实时文本字体选择，并设计与最多用户兼容的字体互联网。 他们提出了 CSS3。 Typekit 启动了它。
Typekit 开发了一些诱人的字体，帮助设计师为他们的网页选择有吸引力和用户友好的字体，但使用 Typekit 的唯一问题是他们向用户收取的费用。
价格是 49 美元，如果设计师想要开发两个网站，他必须支付 99 美元才能在网页上使用字体。 感谢 Google 提供了出色的字体设计并免费提供。
很明显，您无法免费获得您可以用金钱获得的东西，但请相信，Google 网络字体仍然比 Typekit 提供的字体好。 当然，当您不喜欢在字体上花费太多时，Google Web 字体是最好的，因为您知道构建整个网站的成本太高。
谷歌字体及其定制：
截至今天，Google 库中有超过 647 种不同的字体系列。 当您为网站内容选择字体时，必须以与您将如何实现该字体类似的方式查看它。 有些字体看起来很适合正文内容，但作为标题却很糟糕。
幸运的是，Google Web Fonts 允许您自定义预览以匹配您的用例。 您可以输入自定义预览文本，并根据需要更改预览大小。 预览您将在段落视图中使用的任何标题或正文副本很重要，如果您有很多正文副本，请不要使用过多的自定义字体。
汇集正确的字体！
由于我们知道要筛选的字体系列超过 600 种，因此很难通过简单地逐个滚动来过滤和选择正确的字体系列。 因此，请使用以下步骤来确定您的网站所需的确切内容：
- 快速浏览一下 Google 最近更新的字体。 您很有可能会获得流行且无错误的字体，而无需查看其余字体。 此外，请参阅大多数设计人员和开发人员使用的字体。 这样做可以让您了解可以在多种样式和宽度中使用的通用字体。
- 如果您知道网站的字体，字体的特征和样式可以改善您的结果，例如如果您想要手写字体，请禁用所有其他类型的结果。
- Google 允许您通过添加字符的粗细、倾斜和宽度作为过滤选项来进一步优化您的字体搜索。 为您的网站获得最佳字体不是很酷的功能吗？
选择字体
Google 有多种方法可以根据网站所有者的需要选择并实施字体。 这里没有对错。 最适合你的，你都会得到的。 它支持三个按钮来帮助您选择正确的字体：
- 快速使用：快速查看您喜欢的字体。
- 弹出：更多地了解您喜欢的字体，即它的功能和用途。
- Collection：如果你想使用两种以上的字体，Collection 是你需要点击的按钮。 它将在单个页面上添加您喜欢的所有字体。
如何使用谷歌字体？
一旦你选择了你想在你的网页上使用的字体，你可以点击“使用”标签来查看它们的实际效果。 现在，当您确定字体时，您所需要的只是在网页上简单地复制和粘贴一些代码。 您将获得三个选项可供选择：
标准：
这是一个标准的样式表链接。 您需要将它放在 HTML 文件的开头部分，从而节省了添加 @import 规则的步骤，因为您正在显着添加已经包含它的样式表。示例：
CSS：
如果您不想在标题中链接到自动生成的样式表，请使用 CSS @import 规则。 使用以下代码将字体集成到您的 CSS 中：
font-family: 'Henry Pigeous', serif;
font-family: 'Diplomatic'. cursive;
JavaScript
Google 和 Typekit 都在此处开发了此代码，作为 WebFont 加载器的一部分，以便用户更好地控制字体加载。
抓取一个 HTML 片段并将其放在 HTML 标头附近，如下所示：
页面标题
跳转到 CSS 并按照以下步骤操作：
h1 {
font: 400 45px/0.5 'Diplomatic', Arial, sans-serif;
}
p {
font: 400 14px/1.5 'Henry Pegasus', Times, serif;
}
在插件的帮助下！
有一些插件可以提供无缝的 Google 字体集成。 使用插件有其局限性，例如插件不知道在 HTML 或 CSS 的帮助下不进一步自定义就知道查找特定文本。 但是，这里有一些插件可以将 Google 字体包含到您的网站中。
1.字体插件
只需单击几下，即可将 Google 字体嵌入您的网站，这是一种简单有效的方法。 您可以使用样式表或使用 CSS 样式； 两者都可以使它们适应您的主题。 您可以从管理区域或您网站的样式表中执行此操作。 字体插件是您网站所需的一切，快速有效。
2.简单的谷歌字体
使用 Easy Google Fonts 插件，您无需触摸任何编码即可在您的网站上获取字体。 从选择优化到提供独特的颜色以实时预览，所有与字体相关的事情都可以使用 Easy Google Fonts 完成。
3. TK 谷歌字体
当您开发页面或帖子时，TK Google Fonts 会将所有 291 种 Google Web 字体添加到您的可视化编辑器面板中。 只需安装它并开始使用它。
安装以上插件：
- 登录 WordPress 管理员
- 点击“插件”
- 点击“添加新”
- 在右上角输入插件名称，然后单击“立即安装”
自定义插件
- 单击“外观”，然后单击“自定义”。
- 点击“访问网站”，然后点击“自定义”
- 您会注意到一个新添加的菜单为“排版”
实施学习！
我们希望，阅读这篇文章是一个学习课程，现在，是时候在您的网站上使用这些知识了。 浏览各种字体、插件以改进您网站的排版。 请记住，如果您要自定义字体，这将比复制粘贴字体更有益。 让我们知道您用于添加排版以在项目中吸引观众的字体和方法。
字体增强了网站的美学形式，是任何网站设计的基础。 字体或排版都是关于选择行长、磅值、行距、字体和调整组字母之间的间距。
作为设计师，最好通过添加字符的粗细、倾斜度和宽度作为过滤选项来进一步细化字体搜索。 并非所有字体在正文和/或标题内容中看起来都不错。
有些字体作为标题看起来不太好，有些字体在正文内容上不易阅读。 因此，建议您以与您将如何实现它类似的方式查看您选择的字体，以便您可以测试其可读性。
互联网过去使用相同的旧无聊标准字体的日子已经一去不复返了。 技术先进，网页设计师和开发人员被迫设计与互联网上最多用户兼容的字体。
他们提出了 CSS3。 Typekit 发起并开发了一些吸引人的字体供网页设计师使用。 但是，它们的成本太高了。 值得庆幸的是，谷歌出手相救，免费提供出色、用户友好的字体设计。
汇集正确的字体！
目前，谷歌库中的字体数量为 647 种，难以筛选和选择合适的字体。 但是，通过这 3 个步骤，您可以准确地获得网站所需的内容：
- 在 google 上查看最近更新的字体，并获得趋势且无错误的字体。 此外，查找大多数设计师使用的字体，让您了解可以在多种样式和宽度中使用的字体的多功能性。
- 了解您网站的字体、字体的特征和样式，以改善您的结果。
- 通过添加字符的粗细、倾斜和宽度作为过滤选项来优化您的字体搜索。
选择字体
根据您的需要，Google 有多种方法可以帮助您选择字体。 要选择正确的字体，请考虑：
快速访问——快速浏览你喜欢的字体
Pop Out- 了解更多关于字体的信息，即功能和用途
集合-如果您想使用两种以上的字体，请单击此按钮。 它将在单个页面上添加您喜欢的所有字体。
如何使用谷歌字体
选择首选字体后，单击“使用”选项卡以查看它们的实际效果。 然后，在您的网页上复制并粘贴一些代码。 您将获得三个选项可供选择：
标准- 这是一个标准样式表链接。 将它放在 HTML 文件的头部。 它将为您节省添加 @import 规则的步骤，因为您正在显着添加已经拥有它的样式表。
CSS - 使用 CSS @import 规则，以防您不想链接到 header 中自动生成的样式表。 使用以下代码将字体集成到您的 CSS 中：
font-family: 'Henry Pigeous', serif;
字体家族：'外交'。 草书;
JavaScript -Google 和 Typekit 都在此处开发了此代码，作为 Web 字体加载器的一部分，以使用户可以更好地控制字体加载。
抓取一个 HTML 片段并将其放在 HTML 标头附近，如下所示：
页面标题
跳转到 CSS 并按照以下步骤操作：
h1 {
字体：400 45px/0.5 '外交'，Arial，无衬线；
}
p {
字体：400 14px/1.5 'Henry Pegasus'，时代，衬线；
}
关于作者：
Catherrine Garcia 是 Hosting Facts 的一位经验丰富的 Web 开发人员，也是一位热情的博主。 她喜欢通过关于 Web 开发和 WordPress 的文章分享她的知识。