如何更改古登堡编辑的文本大小

时间:2018-12-08 作者:Muhammad

WordPress Gutenberg编辑器中是否有设置来更改我们在撰写帖子时键入的文本的字体大小?我指的是编辑器内部的文本大小,而不是博客访问者查看的已发布文本。

4 个回复
SO网友:Ryan

如果您像我一样来到这里,想知道如何调整古腾堡中可用的文本大小选项,您可以将此代码添加到主题的functions.php 文件(您可以添加任意多个选项):

add_theme_support(
    \'editor-font-sizes\', 
    array(
        array(
            \'name\'      => __( \'Normal\', \'your-theme-text-domain\' ),
            \'shortName\' => __( \'N\', \'your-theme-text-domain\' ),
            \'size\'      => 14,
            \'slug\'      => \'normal\'
        ),
        array(
            \'name\'      => __( \'Medium\', \'your-theme-text-domain\' ),
            \'shortName\' => __( \'M\', \'your-theme-text-domain\' ),
            \'size\'      => 16,
            \'slug\'      => \'medium\'
        )
    )
);
这将在Gutenberg编辑器中产生以下结果:

Gutenberg editor showing custom font sizes for a paragraph in a dropdown menu

您可以添加add_theme_support( \'disable-custom-font-sizes\' ); 到您的functions.php 删除数字输入,尽管“自定义”选项在下拉列表中仍然可见。

SO网友:Glenn Greening

编辑段落时,只需单击右侧的设置/中心距图标。然后选择Block。然后您应该看到编辑字体大小的选项。您可以从下拉菜单中选择或键入所需的字体大小。

screenshot

希望这有帮助。:)

SO网友:birgire

当我们通过块文本设置更改古腾堡中的段落字体大小时,它将以内联方式添加,如:

<p style="font-size:18px">Lorem Ipsum</p>
如果我们经常这样更改字体大小(或其他格式),很容易想象几年后内容的状态,其中大多数内容格式都是硬编码的。

例如,如果我们以后决定切换到新主题,它可能会覆盖新主题的格式。

因此,我建议谨慎使用。

另一种方法是通过不显眼的CSS来定位格式。

如果不可能,则可以考虑通过Gutenberg块设置添加自定义目标CSS类:

enter image description here

将生成一个类属性,如:

<p class="some__custom--class">Lorem Ipsum</p>
我们在相应的样式表中定义CSS类。

SO网友:Gustaf

我也有同样的问题,如何在编辑器中更改标题字体大小,只是发现自己:

PS:这是任何WP定制的通用解决方案:

在编辑器中,使用例如Firefox“inspect element”,选择要更改的元素(任何文本或标题)

  • 转到[侧菜单]外观=>主题编辑器=>选择css设置文件,更改字体大小,并更新css设置文件对于您的情况,它是要更改的editor-blocks.css:

    .edit-post-visual-editor .editor-block-list__block,
    .edit-post-visual-editor .editor-block-list__block p,
    .editor-default-block-appender textarea.editor-default-block-appender__content {
                      font-size: 16px;   /* change to your font size */
     }
    

  • 相关推荐

    Formatting with <pre>

    我正在构建一个不希望对条目内容应用任何样式的网站,因为它应该保留文本的格式。奇怪的是,它在旧条目上工作,但通过前端系统的新条目失败:http://madebylars.nl/music/?page_id=373示例:此方法有效:http://madebylars.nl/music/?tab=the-tallest-man-on-earth-love-is-all 这个不能:http://madebylars.nl/music/?tab=the-tallest-man-on-earth-like-