在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的解決方案。它簡化了無直接代碼交互的情況下的添加，刪除和管理字體。 >

進一步閱讀

（資源列表保持不變，重新格式化以提高可讀性）