通过父主题将使用 @font-face 加载的本地 Font Awesome 出列答案

【问题标题】：Dequeue local Font Awesome loaded with @font-face by parent theme通过父主题将使用 @font-face 加载的本地 Font Awesome 出列
【发布时间】：2019-08-28 05:06:15
【问题描述】：

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

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 文件的情况下阻止加载本地字体吗？

【问题讨论】：

标签： css wordpress fonts font-awesome webfonts

【解决方案1】：

您将无法使此类字体出队或取消注册，因为入队机制不是那样工作的。

注册脚本/样式文件就像为文件创建别名一样。所以当你这样做时：

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

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

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

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

【讨论】：