返回到支持 设计站点 更改站点的字体

更改站点的字体

如果想为站点打造独特的外观,使用不同的字体是个不错的选择。每个主题均有精选字体列表供您选择,包括 Google Fonts。

要更改字体,您将使用另一个选项,该选项取决于您正在使用的主题:

用站点编辑器更改字体

采用我们 WordPress.com Explorer、Creator 和 Entrepreneur 套餐以及旧版专业版套餐的站点可使用此功能。对于使用免费套餐和 Starter 套餐的站点,请升级您的套餐以使用此功能。

如果您的站点使用支持站点编辑器的主题,则您可以通过排版设置(从站点编辑器中的样式按钮访问)更改站点的字体。

箭头指向站点编辑器中的“样式”按钮。

用全局样式更改字体

如果您的站点使用这些主题中的任何一个,则您可以使用“全局样式”来更改站点的字体

  1. 在您的仪表盘中,点击页面
  2. 点击新增按钮,或现有页面标题,在 WordPress 编辑器中打开页面。
    • 如果需要添加新页面,请选择您的首选布局或默认的空白布局。
  3. 在编辑器中,点击“全局样式”按钮。“Aa”按钮位于“设置”图标和绿色的 Jetpack 按钮之间。
  4. 点击“标题字体”或“基本字体”下的下拉菜单,查看可用的字体选项。
“全局样式”按钮旁边的框,位于区块编辑器左上角,“页面设置”按钮和“Jetpack 设置”按钮之间。

字体是成对设置的,一种用于标题字体,另一种用于基本字体。

在“全局样式”菜单中,点击发布以保存新的字体对设置,或点击重置以恢复更改。

发布您在“全局样式”菜单中的更改,并不会发布您正在处理的特定页面。

调整字体大小

区块编辑器提供了在各个区块内更改字体大小的选项。

要更改标题字体大小,请在标题区块中选择不同的标题(H1、H2 等)。

标题区块上的工具栏,包含标题大小更改选项。
H5 到 H6 选项位于区块编辑器一侧的“区块设置”中。

“区块设置”中有用于段落、按钮和其他文本区块的“排版”选项,您可以通过该选项将文本大小更改为“预设大小”,或键入自定义字体大小。

如果您没有看到边栏,您可能需要点击右上角的设置图标以打开设置。这个图标看起来像两个宽窄不一的栏目拼在一个方形里面。

编辑器里的设置图标,采用黑色背景,其下有提示信息“设置”。
点击设置图标,打开区块设置

用定制器更改字体

许多主题都具有更改字体的选项,您可以通过外观 → 定制找到。如果在定制器中没有看到字体选项,请检查您的主题是否支持使用“全局样式”方法更改字体

  1. 仪表盘中,转到外观定制
  2. 在定制器中点击字体选项。
  3. 点击“标题字体”或“基本字体”下的下拉菜单,查看可用的字体选项。
定制器的“定制字体”部分,显示标题字体和基本字体下拉菜单。

字体是成对设置的,一种用于标题字体,另一种用于基本字体。

每次更改字体时,实时预览都会刷新,以便您可以查看该字体在您博客上的显示效果。

调整字体大小和样式

字体样式 – 要调整标题字体的样式,请点击字体下方左侧的选项。系统会根据您选择的字体呈现不同的可用样式。

字体大小 – 要调整标题或基本字体的大小,请点击每个选定字体下方右侧的大小选项,然后从下拉菜单中选择一个大小。

“定制字体”面板,“标题”选项设置为“Tangerine”,字体风格可设置为“粗体”,字体大小可设置为“极大”。

💡

您可以使用自定义 CSS 更改全局默认字体大小。

保存字体

您对选择的字体感到满意后,即可发布站点;如果您想在发布前继续定制站点,则保存草稿

更改字体

选择自定义字体后,您可以根据需要随意更改字体。

要更改您使用的自定义字体,请转到外观 定制 字体,并选择其他标题和基本字体。您可也以点击自定义字体名称右侧的“X“ ,切换回主题的默认字体。

对字体更改感到满意后,请点击发布,或保存草稿继续定制您的站点。

“定制字体”面板,其中的箭头指向自定义标题字体右边的“X”,可将字体重置为主题默认字体。
点击自定义字体旁边的“X“,可恢复主题的默认字体。

📌

保存字体后,可能需要几分钟时间,字体才会显示在您的博客或站点上。您可能还需要清除浏览器的缓存,以确保您看到的是最新版本的站点。

重置字体

要将字体重置为主题的默认字体,您可以点击当前字体旁边的“X“。

  1. 转到外观定制
  2. 点击字体
  3. 点击自定义字体旁边的 X,可重置为主题的默认字体。
  4. 点击保存更改
定制器字体选项,用鼠标点击为“标题”和“基本字体”选择的字体旁边的“X“,可将字体设置回主题的默认字体。

特定文本字体应用

选择字体时,您将看到用于设置整个站点字体的选项,而不是设置单个页面或特定文本行的字体。设计的最佳实践是:当整个站点的字体保持一致时,网站外观最美观。如果一个站点使用很多不同的字体,看起来会不美观。

如果您的目标是突出显示某些文本,可考虑通过其他方式来实现,例如应用不同的颜色、使用引用区块或插入图像

使用自定义字体

您可以使用插件在站点上安装更多字体。您可以使用多种插件为您的站点添加字体。在查看插件时,请查看其评分、正面评论的数量以及您可以从插件开发者那里获得的支持类型。如果您在测试后决定不使用插件,请确保禁用/删除插件,以保持插件列表干净。

常见问题解答

我是否可以将 Typekit.com 账户关联到我的 WordPress.com 站点?

无法将外部 Typekit.com 账户关联到 WordPress.com 站点或博客。

字体会以我使用的语言显示吗?

如果您在“设置 → 常规”下为博客选择了非拉丁语言,则站点将加载所有自定义字体的字符。如果您选择了拉丁语言(例如英语、意大利语、葡萄牙语或西班牙语),则只会加载较小的字体子集。如果某些字符不能在您的博客上正确显示,请先检查语言设置,确保您选择了您正在使用的语言。然后转到您的 定制器 → 字体并重新保存字体,以将其更新到您的新语言设置。

如何判断我的语言是否支持我要使用的字体?

检查特定字体是否可以在任何给定语言中正确显示的最佳方法是在定制器中试用该字体,并查看主题默认字体是否发生了改变。目前,不支持亚洲语言,支持大多数(但不是全部)Cyrillic 字体系列。我们会在之后不断改进和提升,提供更广泛的语言支持。

为什么在我选择的字体显示之前会短暂地显示其他字体?

这称之为 Flash of Unstyled Text (FOUT)。连接速度较慢时,文本首先以主题的默认字体显示。这样,人们可以在加载自定义字体之前开始阅读您的内容,而不是一直在空白页面中等待。这可能意味着在页面完成加载之前会短暂显示其他字体。但总体而言,这对于连接速度较慢的读者来说,总比看到空白屏幕要好。如果您不希望出现这种情况,则可以点击外观 → 定制 → 额外 CSS(仅限高级版、商务版、电子商务版、旧专业版套餐),使用 CSS 编辑器将此 CSS 代码添加到您的站点:

.wf-loading body{ visibility: hidden; }



html:not(.wf-active) body{ display: none; }

Google Fonts 和 GDPR

WordPress.com 主题中采用 Google Fonts 的所有请求都将由 WordPress.com 的服务器提供服务,不再用 Google 的 CDN 或 FDN。此项更改的实施时间为 2022 年 12 月。

如果您的站点使用自定义插件或第三方主题,您需要与插件和/或主题开发者进行确认,确保他们没有用通过 Google 的 CDN 或 FDN 提供 Google Fonts。

您可以在此处详细了解 GDPR。

Copied to clipboard!