在WordPress中管理字体阻止主题-css教程-PHP中文网

>将字体集成到块主题中的资源最初很少。二十二十二个是第一个默认块主题，它使用下载的字体文件作为主题资产进行了证明。这涉及在

>在探索这种新方法之前，让我们回顾一下经典主题的传统方法。

>预先连接的Google字体：

>如何将Google字体添加到WordPress主题（主题Shaper）

首页

web前端

css教程

在WordPress中管理字体阻止主题

Jennifer Aniston

Mar 09, 2025 am 11:23 AM

Managing Fonts in WordPress Block Themes

>网站设计取决于排版。 WordPress主题通常集成了诸如Google字体之类的服务，这些服务在经典PHP主题的定制器中很容易管理。但是，对于块主题而言，这并不那么简单。尽管经典主题集成有充分的文献记录，但块主题字体管理缺乏类似的指导。本文解决了这一差距。阻止主题可以使用Google字体，但是注册过程与传统方法显着不同。 现有知识

>将字体集成到块主题中的资源最初很少。二十二十二个是第一个默认块主题，它使用下载的字体文件作为主题资产进行了证明。这涉及在

>中注册文件，并在

>中定义捆绑字体。后来的主题（例如二十三个），通过定义捆绑字体而没有明确注册来简化这一点。但是，手动字体下载和捆绑仍然保留，否定了通过CDN提供的托管字体的便利。functions.php theme.json最近的发展

> Gutenberg Project是一个用于测试即将到来的块和站点编辑器功能的插件，它提供了解决方案。 Gutenberg的主要建筑师Matias Benedetto通过Create Block主题插件突出显示了使用Google字体（或任何下载的字体）。

学习WordPress提供了此插件的视频概述，该插件通过提供WordPress UI控件来简化主题创建。您可以在不编码或修改模板文件的情况下创建整个主题，儿童主题或样式变化。由WordPress.org团队撰写和维护，目前是Google字体集成在块主题中的最佳方法。但是请注意，它正在积极发展，因此可以预期变化。

>在探索这种新方法之前，让我们回顾一下经典主题的传统方法。

传统方法

>与theShaper（2014）和Cloudways的文章说明了经典方法。二十七个主题例证了

中的Google字体

>预先连接的Google字体：

传统方法的functions.php缺点

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

登录后复制

此方法具有显着的缺点。 2022年的德国法院裁决强调了GDPR违规，这是由于访问Google字体时的访客IP地址暴露。此问题由Create Block主题插件解决。

使用带有块主题的Google字体（现代方式）

function twentyseventeen_resource_hints( $urls, $relation_type ) {
  if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
    $urls[] = array(
      'href' => 'https://fonts.gstatic.com',
      'crossorigin',
    );
  }
  return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

登录后复制

>现代方法利用创建块主题插件。设置本地开发环境（例如，使用Flywheel Local）并安装主题测试数据并创建Block主题插件。

>导航到外观→管理主题字体

。此屏幕列表已定义的字体，并提供选项：

>添加Google字体：
在 >使用空白主题（例如，为“空theme，更名为“清晰”），添加Google字体（类似于Inter）会自动下载并将其存储在主题的

：assets/fonts> theme.json

查看主题

然后，该字体可在网站编辑器的全局样式中可用。>

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

登录后复制

添加本地字体的工作原理类似，与手动修改相比，简化了该过程。插件的界面中还处理了字体删除。

未来的发展

>“字体管理器”功能是针对WordPress Core提供的，提供了类似的功能。>

结论

functions.php创建块主题插件简化了WordPress Block主题中的字体管理，提供了一个用户友好且符合GDPR的解决方案。它简化了无直接代码交互的情况下的添加，删除和管理字体。>

进一步阅读

（资源列表保持不变，重新格式化以提高可读性）