满怀希望就会所向披靡

Wordpress区块编辑器下修改字体样式 & 自定义字体的最佳实践 | 2024

前言

Wordpress中不少新颖或高热主题都采取了区块编辑器(古腾堡)这一新型形式,诚然区块编辑器能使主题变得更加个性与定制化,但其逻辑形式与操作方法也变得些许“复杂化”。

在本篇文章中,我们会选取一个Wordrpess区块主题,以“修改主页、文章页各模块字体大小样式;自定义主题各模块字体”为目标,向大家展示Wordpress区块编辑器下修改字体样式的最佳实践。

字体样式修改

结论

在区块主题中,不同字体设置处所设置的字体有优先级差异,高优先级的字体样式会覆盖低优先级。
比如<字体设置处四>与<字体设置处一>均会影响单篇文章段落字体,则实际样式依照<字体设置处四>。

优先级:特定区块样式 > 区块样式 > "内容"样式 > "文本"样式

实践

区块主题中有如下几类字体设置处,字体样式的设置优先级依次提升,可供修改不同字体、字体尺寸、字体粗细、倾斜与否、行高以及字间距等。本篇实践以区块主题“Twenty Twenty-Four”为例。

字体设置处一

位置:自定义—样式—编辑样式—排版—文本

影响字体:全站内大部分文本字体,包括但不限于分页页码、段落、列表、详细信息、预格式、表格、诗篇。但标题不受其影响。你可以通过设置上方的小眼睛(红框标注)预览到受样式修改影响的模块。

演示:此处设置字体外观为“斜体”,观察到博客全站大部分文本都变为斜体。

字体设置处二

位置:自定义—模板—单篇文章—”内容“区块

影响字体:此处会影响文章页”内容“部分(即所写内容)的文本字体;”页面“及其他模板的”内容“设置影响同理。

演示:此处设置字体外观为“粗体”,观察到文章页原<字体设置处一>应用的内容部分的”斜体“变为”粗体“。

字体设置处三

位置:自定义—样式—区块—段落

影响字体:此处会影响全站”段落“区块的文本字体;其他区块的设置影响同理。

演示:此处设置字体外观为“超细体 斜体”,观察到首页中原<字体设置处一>应用的段落区块”斜体“变为了“超细体 斜体”,文章页中原<字体设置处二>应用的段落区块”粗体“变为了“超细体 斜体”。

字体设置处四

位置:文章/自定义—特定区块内容

影响字体:此处会影响当前操作特定区块的文本字体;文章中特定段落/区块的设置影响、自定义中特定区块的设置影响均同理。

演示:此处设置文章中此段落为“超粗体”,观察到此文章中原<字体设置处三>应用的段落区块”超细体 斜体“变为了“超粗体”。

主题字体自定义

前面所述主要为字体尺寸、字体粗细、倾斜与否、行高以及字间距等字体样式的修改方法,当然也能切换不同字体,但是可供选择的仅有主题所自带的主题。

我们将在这里介绍通过Wordpress插件—“Fonts Plugin | Google Fonts Typography”实现自定义字体。
注意此插件应用谷歌字体,搭载在国内服务器的网站或不适用,请挑选其他插件。

Fonts Plugin插件

基础介绍

插件概况、功能、兼容性介绍

Google字体库目前包含 1455 种独特的字体,完整的Google 字体库可在此处找到Google字体

通过该插件,您可以在 WordPress 网站上轻松使用其中的任何一种字体。
您不必为整个网站使用一种字体,可以轻松地为标题选择一种字体,而为内容选择另一种字体。

您可能很难知道哪种字体会在您的网站上看起来不错,这就是我们提供实时预览功能的原因。
这意味着您可以测试每种字体,并实时预览它与内容的外观。

一旦找到您喜欢的组合,您就可以按 "保存"键,将更改公开。

插件功能
  • 实时自定义预览: 使用 WordPress 定制器实时选择和预览字体。
  • 超过 1000+ 种 Google字体可供选择。
  • Adobe 字体 (Typekit)集成。
  • 适用于任何 WordPress 主题。无需编码。
  • 简单的一键式更新。
  • 支持 WooCommerce。
  • 准备翻译。
  • SSL 和 HTTPS 兼容。
  • 使用单个请求高效加载字体。
  • SEO友好(搜索引擎优化)。
  • 使用PHP7 测试。
  • 选择性字体加载。
  • 预连接资源提示。
  • 本地托管 Google 字体。
  • 上传自定义字体。
  • 字体大小、重量、颜色和行高排版设置。
插件兼容性

Fonts Plugin 可与所有 WordPress 主题配合使用,并已通过以下测试:

  • 所有 StudioPress 和 Genesis 主题
  • Twenty Seventeen
  • Twenty Nineteen
  • Twenty Twenty
  • ThemeGrill
  • LyraThemes
  • ThemeIsle
进一步阅读

有关字体插件的更多信息,请查看以下内容:

使用方式

插件分为基本设置、高级设置等。你可以在基础设置中修改网站总体内容字体、标题字体、按钮与输入字体,或是通过高级设置,分别设置站点名称字体、导航栏字体、文章标题字体、内容字体以及H1、H2字体等等。

如果字体显示有误,请您确认您是否在区块编辑器中设置了相关样式,并结合F12的帮助。
同时,您可以在“调试”中开启“强制样式”,这会给所以设置的字体样式添加上!important强调。

常见问题:文章中对字体进行“加粗”操作显示的级别有误

情景示例:当我们使用插件将文章内容字体修改为“Noto Serif SC”系列,字体粗细设为“中等”,对文章中部分内容执行“加粗”操作,浏览文章时发现字体加粗显示不明显。

通过审查元素得知,“加粗”字体应用的字体粗细为用户代理表指示的bold。而bold样式与我们所预设的“中等”样式粗细较为接近,所以需要将其修改为更粗、更显著的样式。

此处我们通过主题自定义—额外CSS,添加样式,以使得“加粗”的文本获得不同的字体粗细:

strong {
    font-weight: 900; #此处自行修改
}

Wordpress区块编辑器下修改字体样式 & 自定义字体的最佳实践 | 2024

https://woolio.cn/archives/1666/

作者

bluish

发布时间

2024-03-04

许可协议

CC BY-SA 4.0

添加新评论