如何在Gutenberg编辑器中添加自定义网站字体并适配外观？

Hey David, 我刚好折腾过Gutenberg编辑器的字体自定义和样式适配，给你梳理几个关键方向和实操方法，应该能帮你解决问题：

一、先搞懂：别直接改核心文件！ #

你之前找的插件文件夹或者核心CSS文件（比如wp-includes/css/dist/editor/editor.min.css）确实是Gutenberg的默认样式所在，但绝对不建议直接修改这些文件——WordPress更新后你的改动会被完全覆盖，白忙活一场。

二、推荐的自定义方法（安全且持久） #

1. 主题/子主题中添加编辑器自定义样式 #

这是最靠谱的方式，步骤如下：

• 打开你的主题（或子主题，更推荐子主题，避免父主题更新丢失修改）的functions.php文件，添加以下代码开启编辑器样式支持：

  // 启用编辑器样式支持
  add_theme_support('editor-styles');
  // 指定自定义编辑器样式文件路径
  add_editor_style('editor-custom.css');
  

• 在主题根目录创建editor-custom.css文件，在里面写你的字体和样式规则，比如：

  /* 全局编辑器容器字体 */
  .editor-styles-wrapper {
      font-family: '你的自定义正文字体', Helvetica, Arial, sans-serif;
      color: #333; /* 同步网站正文颜色 */
      line-height: 1.6; /* 同步行高 */
  }
  
  /* 标题区块单独设置字体 */
  .wp-block-heading h1,
  .wp-block-heading h2,
  .wp-block-heading h3 {
      font-family: '你的自定义标题字体', Georgia, serif;
      font-weight: 700;
  }
  
  /* 引用区块样式 */
  .wp-block-quote {
      font-family: '你的自定义引用字体', cursive;
      border-left-color: #你的网站主题色;
  }
  

2. 确保自定义字体加载到编辑器 #

如果你用的是本地字体或第三方字体（比如自定义的Web字体），需要把字体也加载到编辑器环境中，否则编辑器里会显示 fallback 字体：

• 在functions.php中添加以下代码，加载字体样式文件：

  function enqueue_custom_fonts_for_gutenberg() {
      // 加载你的字体样式文件（里面包含@font-face规则）
      wp_enqueue_style('custom-editor-fonts', get_template_directory_uri() . '/assets/css/custom-fonts.css');
  }
  // 钩子到编辑器资源加载动作
  add_action('enqueue_block_editor_assets', 'enqueue_custom_fonts_for_gutenberg');
  

• 你的custom-fonts.css里要包含字体的@font-face定义，比如：

  @font-face {
      font-family: '你的自定义正文字体';
      src: url('../fonts/your-font-regular.woff2') format('woff2'),
           url('../fonts/your-font-regular.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
  

3. 用插件快速调试（临时或简单需求） #

如果不想改代码，可以用类似「Custom CSS & JS」这类插件，在插件的自定义CSS面板中，针对编辑器的类写样式，注意选择器要加上.editor-styles-wrapper前缀，比如：

.editor-styles-wrapper .wp-block-paragraph {
    font-family: '你的自定义字体', sans-serif;
}

三、为什么你之前没找到有效内容？ #

Gutenberg的核心编辑器样式是WordPress核心自带的（除非你单独安装了Gutenberg插件），插件文件夹里的样式一般是针对特定扩展区块的，不是全局编辑器的基础样式。所以直接找插件文件自然找不到全局字体的定义啦～

内容的提问来源于stack exchange，提问作者David Braun