Wordpress区块编辑器下修改字体样式 & 自定义字体的最佳实践 | 2024 作者: bluish 时间: 2024-03-04 分类: 折腾 <!-- wp:heading {"textAlign":"left"} --> <h2 class="wp-block-heading has-text-align-left">前言</h2> <!-- /wp:heading --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">Wordpress中不少新颖或高热主题都采取了区块编辑器（古腾堡）这一新型形式，诚然区块编辑器能使主题变得更加个性与定制化，但其逻辑形式与操作方法也变得些许“复杂化”。</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">在本篇文章中，我们会选取一个Wordrpess区块主题，以“<strong>修改主页、文章页各模块字体大小样式；自定义主题各模块字体</strong>”为目标，向大家展示Wordpress区块编辑器下修改字体样式的最佳实践。</p> <!-- /wp:paragraph --> <!-- wp:heading --> <h2 class="wp-block-heading">字体样式修改</h2> <!-- /wp:heading --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">结论</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <p>在区块主题中，不同字体设置处所设置的字体有优先级差异，高优先级的字体样式会覆盖低优先级。<br>比如<字体设置处四>与<字体设置处一>均会影响单篇文章段落字体，则实际样式依照<字体设置处四>。</p> <!-- /wp:paragraph --> <!-- wp:quote --> <blockquote class="wp-block-quote"><!-- wp:paragraph --> <p><strong>优先级：<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-palette-color-1-color">特定区块样式 > 区块样式 > "内容"样式 > "文本"样式</mark></strong></p> <!-- /wp:paragraph --></blockquote> <!-- /wp:quote --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">实践</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <p>区块主题中有<strong>如下几类字体设置处</strong>，字体样式的设置<strong>优先级依次提升</strong>，可供修改不同字体、字体尺寸、字体粗细、倾斜与否、行高以及字间距等。本篇实践以区块主题“<em><strong>Twenty Twenty-Four</strong></em>”为例。</p> <!-- /wp:paragraph --> <!-- wp:heading {"textAlign":"left","level":4} --> <h4 class="wp-block-heading has-text-align-left"><strong>字体设置处一</strong></h4> <!-- /wp:heading --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">位置：自定义—样式—编辑样式—排版—文本</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">影响字体：全站内<strong>大部分文本字体</strong>，包括但不限于<strong>分页页码、段落、列表、详细信息、预格式、表格、诗篇</strong>。但<strong>标题</strong>不受其影响。你可以通过设置上方的小眼睛（红框标注）预览到受样式修改影响的模块。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>演示：此处设置字体外观为“斜体”，观察到博客全站大部分文本都变为斜体。</p> <!-- /wp:paragraph --> ![字体设置处一][1]![应用后全站字体变化示例：段落、分页][2] <!-- wp:heading {"level":4} --> <h4 class="wp-block-heading"><strong>字体设置处二</strong></h4> <!-- /wp:heading --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">位置：自定义—模板—单篇文章—”内容“区块</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">影响字体：此处会影响文章页<strong>”内容“部分</strong>（即所写内容）的文本字体；”页面“及其他模板的”内容“设置影响同理。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>演示：此处设置字体外观为“粗体”，观察到文章页原<字体设置处一>应用的内容部分的”斜体“变为”粗体“。</p> <!-- /wp:paragraph --> ![字体设置处二][3]![应用后文章页字体变化示例：内容部分][4] <!-- wp:group {"layout":{"type":"constrained"}} --> <!-- wp:heading {"level":4} --> <h4 class="wp-block-heading"><strong>字体设置处三</strong></h4> <!-- /wp:heading --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">位置：自定义—样式—区块—段落</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">影响字体：此处会影响全站<strong>”段落“区块</strong>的文本字体；其他区块的设置影响同理。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>演示：此处设置字体外观为“超细体 斜体”，观察到首页中原<字体设置处一>应用的段落区块”斜体“变为了“超细体 斜体”，文章页中原<字体设置处二>应用的段落区块”粗体“变为了“超细体 斜体”。</p> <!-- /wp:paragraph --> ![字体设置处三][5]![应用后文章页字体变化示例：段落区块][6] <!-- /wp:group --> <!-- wp:group {"layout":{"type":"constrained"}} --> <!-- wp:heading {"level":4} --> <h4 class="wp-block-heading"><strong>字体设置处四</strong></h4> <!-- /wp:heading --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">位置：文章/自定义—特定区块内容</p> <!-- /wp:paragraph --> <!-- wp:paragraph {"className":"is-style-default"} --> <p class="is-style-default">影响字体：此处会影响<strong>当前操作特定区块</strong>的文本字体；文章中特定段落/区块的设置影响、自定义中特定区块的设置影响均同理。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>演示：此处设置文章中此段落为“超粗体”，观察到此文章中原<字体设置处三>应用的段落区块”超细体 斜体“变为了“超粗体”。</p> <!-- /wp:paragraph --> ![字体设置处四][7]![应用后此篇文章字体变化示例：段落][8] <!-- wp:heading --> <h2 class="wp-block-heading">主题字体自定义</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>前面所述主要为字体尺寸、字体粗细、倾斜与否、行高以及字间距等<strong>字体样式</strong>的修改方法，当然也能切换不同字体，但是可供选择的仅有主题所自带的主题。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>我们将在这里介绍通过Wordpress插件—“<em><strong>Fonts Plugin | Google Fonts Typography</strong></em>”实现自定义字体。<br>注意此插件应用谷歌字体，搭载在国内服务器的网站或不适用，请挑选其他插件。</p> <!-- /wp:paragraph --> <!-- /wp:group --> ![各字体设置处切换字体][9]![Fonts Plugin插件][10] <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">Fonts Plugin插件</h3> <!-- /wp:heading --> <!-- wp:heading {"textAlign":"left","level":4} --> <h4 class="wp-block-heading has-text-align-left"><strong>基础介绍</strong></h4> <!-- /wp:heading --> 插件概况、功能、兼容性介绍 <!-- wp:paragraph --> <p><a href="https://fontsplugin.com/?utm_source=wporg&utm_medium=readme&utm_campaign=intro">Google字体</a>库目前包含 1455 种独特的字体，完整的Google 字体库可在此处找到<a href="https://fonts.google.com/" target="_blank" rel="noreferrer noopener">Google字体</a>。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>通过该插件，您可以在 WordPress 网站上轻松使用其中的任何一种字体。<br>您不必为整个网站使用一种字体，可以轻松地为标题选择一种字体，而为内容选择另一种字体。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>您可能很难知道哪种字体会在您的网站上看起来不错，这就是我们提供实时预览功能的原因。<br>这意味着您可以测试每种字体，并实时预览它与内容的外观。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>一旦找到您喜欢的组合，您就可以按 "保存"键，将更改公开。</p> <!-- /wp:paragraph --> <!-- wp:heading {"level":5} --> <h5 class="wp-block-heading"><strong>插件功能</strong></h5> <!-- /wp:heading --> <!-- wp:list --> <ul><!-- wp:list-item --> <li><strong>实时自定义预览：</strong> 使用 WordPress 定制器实时选择和预览字体。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><strong>超过 1000+ 种 </strong>Google字体可供选择。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><strong>Adobe 字体 (Typekit)</strong>集成。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>适用于任何 WordPress 主题。无需编码。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>简单的一键式更新。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>支持 WooCommerce。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>准备翻译。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>SSL 和 HTTPS 兼容。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>使用单个请求高效加载字体。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>SEO友好（搜索引擎优化）。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>使用<strong>PHP7</strong> 测试。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>选择性字体加载。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>预连接资源提示。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>本地托管 Google 字体。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>上传自定义字体。</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>字体大小、重量、颜色和行高排版设置。</li> <!-- /wp:list-item --></ul> <!-- /wp:list --> <!-- wp:heading {"level":5} --> <h5 class="wp-block-heading"><strong>插件兼容性</strong></h5> <!-- /wp:heading --> <!-- wp:paragraph --> <p>Fonts Plugin 可与所有 WordPress 主题配合使用，并已通过以下测试：</p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><!-- wp:list-item --> <li>所有 StudioPress 和 Genesis 主题</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Twenty Seventeen</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Twenty Nineteen</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>Twenty Twenty</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>ThemeGrill</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>LyraThemes</li> <!-- /wp:list-item --> <!-- wp:list-item --> <li>ThemeIsle</li> <!-- /wp:list-item --></ul> <!-- /wp:list --> <!-- wp:heading {"level":5} --> <h5 class="wp-block-heading"><strong>进一步阅读</strong></h5> <!-- /wp:heading --> <!-- wp:paragraph --> <p>有关字体插件的更多信息，请查看以下内容：</p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><!-- wp:list-item --> <li><a href="https://docs.fontsplugin.com/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">文档</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://fontsplugin.com/font-combinations/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">字体组合</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://fontsplugin.com/google-fonts-checker/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">谷歌字体检查器</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://fontsplugin.com/wordpress-google-fonts/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">如何在 WordPress 中使用谷歌字体</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://docs.fontsplugin.com/integrations/beaver-builder/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">在 Beaver Builder 中使用谷歌字体</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://docs.fontsplugin.com/integrations/elementor/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">Elementor 中的谷歌字体</a></li> <!-- /wp:list-item --> <!-- wp:list-item --> <li><a href="https://docs.fontsplugin.com/integrations/wpbakery/?utm_source=wporg&utm_medium=readme&utm_campaign=docs">WPBakery中的谷歌字体</a></li> <!-- /wp:list-item --></ul> <!-- /wp:list --> <!-- wp:heading {"level":4} --> <h4 class="wp-block-heading"><strong>使用方式</strong></h4> <!-- /wp:heading --> <!-- wp:paragraph --> <p>插件分为基本设置、高级设置等。你可以在基础设置中修改网站总体内容字体、标题字体、按钮与输入字体，或是通过高级设置，分别设置站点名称字体、导航栏字体、文章标题字体、内容字体以及H1、H2字体等等。</p> <!-- /wp:paragraph --> ![设置导航][11]![基础设置][12]![高级设置][13]![高级设置-内容][14]![调试][15] <!-- wp:group {"layout":{"type":"constrained"}} --> <!-- wp:paragraph --> <p>如果字体显示有误，请您确认您是否在区块编辑器中设置了相关样式，并结合F12的帮助。<br>同时，您可以在“调试”中开启“强制样式”，这会给所以设置的字体样式添加上!important强调。</p> <!-- /wp:paragraph --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">常见问题：文章中对字体进行“加粗”操作显示的级别有误</h3> <!-- /wp:heading --> <!-- wp:paragraph --> <p>情景示例：当我们使用插件将文章内容字体修改为“Noto Serif SC”系列，字体粗细设为“中等”，对文章中部分内容执行“加粗”操作，浏览文章时发现字体加粗显示不明显。</p> <!-- /wp:paragraph --> <!-- /wp:group --> ![设置文字内容字体 \u0026 Noto Serif的系列字体粗细][16]![加粗字体展示][17] <!-- wp:paragraph --> <p>通过审查元素得知，“加粗”字体应用的字体粗细为用户代理表指示的<code>bold</code>。而<code>bold</code>样式与我们所预设的“中等”样式粗细较为接近，所以需要将其修改为更粗、更显著的样式。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>此处我们通过主题自定义—额外CSS，添加样式，以使得“加粗”的文本获得不同的字体粗细：</p> <!-- /wp:paragraph --> <!-- wp:code --> <pre class="wp-block-code"><code>strong { font-weight: 900; #此处自行修改 }</code></pre> <!-- /wp:code --> ![添加前审查元素][18]![添加后审查元素][19] [1]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-000638.png [2]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-002746.png [3]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-005149.png [4]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-005629.png [5]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-011011.png [6]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-012103-1.png [7]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-014619.png [8]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-014630.png [9]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-130137.png [10]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-130903.png [11]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-132229.png [12]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-132916.png [13]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-133014.png [14]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-133023.png [15]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-133315.png [16]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-134451.png [17]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-134511.png [18]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-135652.png [19]: https://bluish.cc/usr/uploads/2024/03/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE-2024-03-04-135630.png Wordpress区块编辑器下修改字体样式 & 自定义字体的最佳实践 | 2024 https://bluish.net/archives/1666/ 作者 bluish 发布时间 2024-03-04 许可协议 CC BY-SA 4.0 复制版权信息 标签: wordpress, 插件, 主题