如何修复WordPress WooCommerce站点Lighthouse的webfont加载文本可见报错

AI 小北

2026-9-28

WooCommerce star.woff字体加载可见性问题修复方案

以下是经过实测可行的处理方案，按优先级从高到低排列：

方案1：自定义CSS覆写@font-face规则
不要直接修改WooCommerce插件的原生CSS文件（插件更新后会覆盖修改内容），直接进入WordPress后台→外观→自定义→额外CSS，插入如下代码：
```
@font-face {
  font-family: 'star';
  src: url('https://www.montre-connexion.fr/wp-content/plugins/woocommerce/assets/fonts/star.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```
这段自定义CSS优先级高于插件原生CSS，会覆盖原有规则，生效后即可满足Lighthouse的检测要求。
方案2：使用WooCommerce过滤器修改字体参数
若CSS覆写未生效，可通过钩子修改WooCommerce星级字体的加载参数，将如下代码添加到你当前使用的子主题的functions.php文件中，也可通过「代码片段」类插件添加（避免修改主题源码）：
```
add_filter('woocommerce_get_star_rating_font_args', function($args) {
  $args['font-display'] = 'swap';
  return $args;
});
```
方案3：完全禁用不需要的star字体
如果你站点没有使用WooCommerce的星级评分功能，可直接禁止该字体加载，彻底消除该报错同时减少资源请求，添加如下代码到子主题functions.php：
```
add_action('wp_enqueue_scripts', function() {
  wp_dequeue_style('woocommerce-general');
  wp_enqueue_style('custom-woocommerce-general', get_stylesheet_directory_uri() . '/woocommerce/css/general.css', array(), WC_VERSION);
}, 999);
```
复制WooCommerce的general.css文件到子主题对应路径，删除其中star字体的@font-face声明即可。
生效验证注意事项
所有修改完成后，需要清空站点缓存（包括页面缓存、CDN缓存、浏览器缓存），再用Lighthouse的无痕模式重新检测，避免旧缓存导致修改看起来未生效。