如何在 WordPress 中更改字体类型、颜色和大小

为改变 WordPress 中的字体而苦恼?

当涉及到网站的设计和用户体验时,网站的字体或排版起着至关重要的作用。当您创建或优化网页时,您会希望找到最适合您的内容的字体,这样访问者不仅会被您的设计所吸引,还会按预期接收信息。但是,可能很难知道从哪里开始,尤其是当您的 WordPress 主题不提供非常灵活的字体选项时。值得庆幸的是,有一些简单的方法可以超越主题的内置排版选项,并为您的WordPress 网站访问互联网上几乎所有的字体。

在这篇文章中,我们将回顾四种在 WordPress 中更改字体的不同方法,包括更改字体类型、大小和颜色。

如何在 WordPress 中更改字体

以下是每种方法的简要总结:

  1. 使用您的 WordPress 主题:最好的起点是检查您的 WordPress 主题是否已经提供了灵活的排版设置。这并不总是有效,但我们始终建议从这里开始。
  2. 使用 Google Fonts 插件:您可以使用一个简单的免费插件来访问 Google Fonts 上的 1,350 多种免费字体。
  3. 上传自定义字体:您可以使用简单的插件或您自己的自定义 CSS 将任何自定义字体上传到您的网站。
  4. 为个别内容调整字体:如果需要,您可以逐个调整站点的字体。

1. 使用您的 WordPress 主题设置更改字体。

在 WordPress 中,更改字体最简单的方法——也是最好的起点——是主题的内置排版设置。
几乎所有 WordPress 主题都带有内置选项,可让您更改字体、字体大小和字体颜色。不过,这些选项对于每个主题都是独一无二的。
有些主题会给您提供非常有限的选择,在这种情况下,您可能希望使用此列表中的其他方法之一。其他主题将为您提供非常详细的选项,在这种情况下,您可能只需要主题的字体选项。
有两种方法可以访问主题的字体设置。

WordPress Customizer

访问主题排版设置的最常见方法是通过 WordPress Customizer。要启动它,请转到您的 WordPress 仪表板中的外观 → 自定义。
您需要找到主题排版的设置区域。不幸的是,每个主题都会略有不同,因此我们无法为您提供确切的说明。
通常,您会在定制程序侧边栏中看到一个名为“排版”的菜单区域。
但是,您可能需要先导航到其中一个菜单类别。例如,在 Astra 主题中,您需要先打开全局设置,然后才能找到Typography设置:

选择这些设置后,您将看到更改站点字体的选项。同样,这些选项对于每个 WordPress 主题都是不同的。
对于此示例,下图显示了免费 Astra 主题中的排版选项。您可以使用下拉菜单更改网站不同部分的字体。如果您不确定如何更改字体大小,您也应该可以从该区域进行更改。

当您在此处进行更改时,您应该会看到这些更改立即出现在您网站的实时预览中。
要更改字体颜色,您可能需要转到定制程序中的其他区域,例如颜色设置。或者,您可能需要添加一些自定义 CSS。例如,下面是如何通过添加一些自定义 CSS 来更改页眉中的字体颜色:

.site-title a, .site-title a:focus, .site-title a:hover, .site-title a:visited {
  color: #0742ff;
}

您可以将此自定义 CSS 添加到自定义程序中的附加 CSS部分,如下所示。

如果您对更改的外观感到满意,请单击“发布”按钮使它们生效。

自定义主题选项面板

第二种方法已经不那么常见了,但一些 WordPress 主题仍然使用自定义主题选项面板。
在这种情况下,您通常会从该区域而不是 WordPress Customizer 管理字体。
如果您在定制器中没有看到任何字体选项,请查看您的主题文档,看看您是否需要改用自定义主题选项区域。

2. 将谷歌字体添加到您的 WordPress 网站。

如果您对主题的内置字体设置不满意,另一个不错的选择是将 Google 字体添加到您的站点。
如果您不熟悉 Google 字体,它是一个包含 1,350 多种免费字体的大型集合,包括网络上一些最流行的字体,例如 Roboto、Montserrat 和 Lato。您可以在此处浏览完整的收藏。
许多流行的 WordPress 主题现在提供内置的 Google 字体支持,您通常可以通过上一节中的方法访问。
但是,如果您的主题不提供该选项,则有许多排版插件可让您轻松地将 Google 字体添加到 WordPress。以下是一些最常用的WordPress Google 字体插件:

  • Fonts Plugin
  • Easy Google Fonts
  • WP Google Fonts

更高级的用户还可以考虑使用OMGF 插件,它可以帮助您在服务器上本地托管字体,而不是使用 Google 字体内容分发网络 (CDN)。从性能的角度来看,一些网站管理员更喜欢这种方法,因为它可以让您控制缓存行为并消除第三方 HTTP 请求。
对于本教程,我们将使用免费的字体插件,但大多数 Google 字体插件的工作方式类似。
首先,从 WordPress.org 安装并激活插件。从那里,字体插件允许您使用实时 WordPress 自定义程序自定义您网站的字体,就像我们为您展示的上面的主题方法一样。
要启动该界面,请转到 WordPress 仪表板中的字体插件 → 自定义字体。您应该会看到站点的实时预览以及侧边栏中的四个设置区域:

  • 基本设置:控制正文、标题和按钮的全站排版。
  • 高级设置:将排版应用于更具体的元素,例如侧边栏小部件和页脚小部件。这些将自动从基本设置区域继承字体,但您可以根据需要覆盖它们。
  • 字体加载:需要插件的高级版本。
  • 调试:您应该能够将这些保留为默认值。

首先,转到基本设置并进行全站范围的选择。当您更改字体时,您应该会立即看到实时预览的变化。

对于某些网站,这可能就是您所需要的。但是,如果您想要调整特定元素的字体,您可能需要打开“高级设置”区域以进行更精细的控制。

3. 为 WordPress 添加自定义字体。

谷歌字体因其庞大的优质字体库而广受欢迎。但是,您可能会遇到 Google 字体集不够用的情况。
在这种情况下,您可以找到许多可以在您的 WordPress 网站上使用的免费或付费字体。但是,您需要将字体上传到您站点的服务器,然后将它们集成到您的网页中。
要查找字体,请尝试在 Google 上搜索或浏览流行的免费字体市场,例如Font Squirrel、DaFont和1001 Free Fonts(实际上有 65,000 多种免费字体)。然后,您可以使用插件将它们添加到您的网站或使用 CSS 手动上传和注册字体。
我们将在下面介绍这两种方法。

下载“使用任何字体”插件。

向 WordPress 添加自定义字体的最简单方法是通过恰当命名的Use Any Font 插件。顾名思义,这个插件可以让您将任何字体文件上传到 WordPress 并在您网站的任何地方使用它,包括在本机编辑器、页面构建器插件和一些流行的 WordPress 主题中。
这个插件是非技术用户的最佳选择,因为它消除了使用自定义 CSS 的需要。
首先,安装并激活插件。然后,转到WordPress 仪表板中新的使用任何字体区域。
首先,单击按钮生成免费的精简版/测试 API 密钥,然后在生成 API 密钥后单击验证按钮。

然后,转到“上传字体”选项卡并上传您要使用的字体文件。您可以使用以下格式:

  • .woff
  • .ttf文件
  • .otf

如果您将字体下载为 zip 文件,则首先需要解压缩该 zip 文件,然后上传实际的字体文件。

上传完成后,转到“指定字体”选项卡以指定要在站点上使用该字体的位置:

  1. 单击分配字体按钮。
  2. 使用下拉菜单选择您刚刚上传的字体。
  3. 使用复选框来控制要应用该字体的位置。例如,要使用博客文章标题的字体,您可以选择Post Title Only。或者,您可以选择标题 1以将其用于所有 H1 标签。
  4. 单击设置下方的另一个分配字体按钮以保存您的选择。

就是这样。您的站点将开始为您选择的元素使用该字体。以下是帖子标题的自定义字体示例:

使用自定义 CSS 代码。

如果您不想使用插件,您还可以使用 CSS 向 WordPress 添加自定义字体——尽管这种方法技术性更强一些。
首先,您需要将自定义字体文件上传到 WordPress 站点的服务器。我们建议尽可能使用 WOFF2 格式,因为它提供的文件大小比其他字体格式小,这将提高您网站的性能。
上传字体文件后,您需要使用 CSS font-face 属性在您的网站上注册字体。您可以通过两种方式做到这一点:

  1. 打开 WordPress Customizer 并将代码添加到Additional CSS区域。
  2. 创建一个 WordPress 子主题并将代码添加到子主题中的style.css文件。

这是您需要使用的代码。确保将详细信息(名称、文件位置等)替换为您正在使用的实际字体:

@font-face {
font-family: YourFontFamilyName;
src: url(full-url-path-to-font-file.woff);
font-weight: normal;
}

完成后,您可以使用额外的 CSS 来控制在何处使用字体。例如,如果您希望网站上的所有 H1 标题都使用此字体,您可以添加以下代码:

font-family: YourFontFamilyName;
}

使用自定义 CSS 也是更改字体颜色的一个很好的解决方案,因为您只需添加一行额外的代码来控制您正在使用的字体的颜色和大小。

4. 在 WordPress 编辑器中更改字体。

到目前为止,我们假设您想要更改整个网站的字体。但是,您可能会遇到只想更改特定内容片段的字体的情况。
这里有两个选择。

使用块编辑器和字体插件。

如果您使用的是原生 WordPress 块编辑器,则可以更改设计中特定块的排版。但是,您需要一个插件的帮助——与我们在上面的 Google 字体部分中介绍的相同的字体插件。
只要插件处于活动状态,您就会获得一个可以在编辑器中使用的新 Google 字体块。此块允许您向编辑器添加段落或标题文本。但是,与常规的段落或标题块不同,您还可以选择更改字体。
添加 Google 字体块时,您首先要选择块类型。默认是段落文本,但您也可以使用下拉菜单将其变成标题。
然后,使用字体下拉菜单选择您要使用的字体。您可以从 Google Fonts 中选择任何字体。
在此之下,您还将获得其他选项来控制字体大小、行高和颜色,这也使它成为在 WordPress 中更改字体大小的绝佳解决方案。

使用页面构建器。

另一种选择是使用页面构建器插件,因为几乎所有页面构建器插件都会为您提供逐个内容的精细排版控制。例如,如果您使用Elementor,它会让您调整页面上每个小部件的排版。

在 WordPress 中更改字体

排版在您的网站上起着重要作用,因此学习如何更改 WordPress 中的字体是一项重要的技能。
首先,您需要检查主题的内置排版选项是否可以满足您的需要。如果没有,请考虑使用 Google 字体插件或上传您自己的自定义字体。
如果您需要逐件更精细地控制字体,您还可以在您最喜欢的页面构建器或 WordPress 块编辑器(借助插件)中使用版式控制。

Newsletter Updates

Enter your email address below and subscribe to our newsletter

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注