由父主题使用 @font-face 加载本地 Font Awesome 出队

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 glyph)

不幸的是，无论如何加载本地字体，Google PageSpeed 和 GTmetrix 显示，导致 CDN link:

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

和本地link：

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

您将无法对此类字体进行出队或注销，因为入队机制不是那样工作的。

注册 script/style 文件就像为文件创建别名。所以当你这样做时：

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

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

当您将 script/style 加入队列时，您是在告诉 WP，应该将给定文件（必须注册的名称）加入队列（包含在 HTML 输出中）。

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

由父主题使用 @font-face 加载本地 Font Awesome 出队

Dequeue local Font Awesome loaded with @font-face by parent theme

css

wordpress

fonts

font-awesome

webfonts