Question

我使用店面主题。在以下位置：

https://mywebsite.com/wp-content/themes/storefront/assets/css/base/icons.css

有很多像这样的Font Awesome CSS：

.fa-flask:before {
  content: "\f0c3"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-flipboard:before {
  content: "\f44d"; }

.storefront-product-pagination a[rel='next']::after {
  content: "\f105";
  padding-left: 1.41575em; }

.single-product .pswp__button {
  background-color: transparent; }

在声明之前还有一个注释：

/*!
 * Font Awesome Free 5.0.9 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../../../assets/fonts/fa-solid-900.eot");
  src: url("../../../assets/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/fa-solid-900.woff2") format("woff2"), url("../../../assets/fonts/fa-solid-900.woff") format("woff"), url("../../../assets/fonts/fa-solid-900.ttf") format("truetype"), url("../../../assets/fonts/fa-solid-900.svg#fontawesome") format("svg"); }

我想使此本地Font Awesome出队/注销，并用CDN来源的Font Awesome代替。

我尝试过：

add_action( 'wp_enqueue_scripts', 'load_awesome_from_CDN', 999 );
function load_awesome_from_CDN() {

    wp_dequeue_style( 'font-awesome' );
    wp_deregister_style( 'font-awesome' );  

    wp_enqueue_style('font-awesome', '//use.fontawesome.com/releases/v5.8.1/css/all.css');

}

这：

// Remove and unregister old font Awesome.
function remove_styles(){      
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');    
}
add_action( 'wp_head', 'remove_styles', 999);

// Add new Font Awesome.
function load_awesome() { 
    wp_enqueue_style('font-awesome', '//use.fontawesome.com/releases/v5.8.1/css/all.css');    
}
add_action( 'wp_enqueue_scripts',  'load_awesome', 999);

这两种结果均导致使用CDN字体（已在Chbrome开发工具中进行了检查）： Font Awesome 5 Free Solid —网络资源（1个字形）

不幸的是，无论如何，都会加载本地字体，如Google PageSpeed和GTmetrix所显示的那样，从而导致CDN链接：

https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-solid-900.woff2

和本地链接：

https://mywebsite.com/wp-content/themes/storefront/assets/fonts/fa-solid-900.woff2

如果我在函数中包含以下代码，则不再加载本地字体，但是我丢失了整个icons.css文件的CSS格式，这是没有选择的，因为许多重要的格式都存储在其中：

wp_dequeue_style( 'storefront-icons' );
wp_deregister_style( 'storefront-icons' );

是否可以在不破坏.css文件的情况下停止加载本地字体？

Answer 1

您将无法使此类字体出队或注销，因为入队机制并非如此。

注册脚本/样式文件就像为文件创建别名。因此，当您这样做时：

wp_register_script( $handle, $src, $deps, ...)

您告诉WP您将使用$handle作为给定文件的名称（并且该文件具有某些依赖性，版本等）。

将脚本/样式加入队列时，就是在告诉WP，应将给定文件（必须注册其名称）入队（包括在HTML输出中）。

您遇到的问题是FontAwesome不是注册的脚本/样式。它只是另一个CSS文件的一部分。因此，您将不得不使所有该文件出队，并将该文件中的所有其他CSS代码放入您自己的自定义文件中。

通过父主题使加载有@ font-face的本地Font Awesome出队

1 个答案: