我们可以使用style_loader_tag filter可筛选正在输出的链接。

以下是过滤器：

$tag = apply_filters( \'style_loader_tag\', "<link rel=\'$rel\' id=\'$handle-css\' $title href=\'$href\' type=\'text/css\' media=\'$media\' />\\n", $handle, $href, $media);

此处，要为其添加属性的链接$句柄是font-awesome 所以如果把手，那么你可以更换font-awesome-css 提供额外信息。

add_filter(\'style_loader_tag\', \'wpse_231597_style_loader_tag\');

function wpse_231597_style_loader_tag($tag){

    $tag = preg_replace("/id=\'font-awesome-css\'/", "id=\'font-awesome-css\' online=\\"if(media!=\'all\')media=\'all\'\\"", $tag);

    return $tag;
}

如果您打算推迟一个以上的样式表，我发现这种方法是相当可重用的。

把这个放在某个地方

function _changeme_defer_css( $html, $handle ) {

    $deferred_stylesheets = apply_filters( \'changeme_deferred_stylesheets\', array() );

    if ( in_array( $handle, $deferred_stylesheets, true ) ) {
        return str_replace( \'media=\\\'all\\\'\', \'media="print" onload="this.media=\\\'all\\\'"\', $html );
    } else {
        return $html;
    }

}
add_filter( \'style_loader_tag\', \'_changeme_defer_css\', 10, 2 );

<像往常一样加载字体：

function _changeme_load_font_awesome() {
    wp_enqueue_style( \'font-awesome\', URI . \'/fonts/font-awesome/css/font-awesome.min.css\' );
}
add_filter( \'wp_enqueue_scripts\', \'_changeme_load_font_awesome\' );

<像这样推迟时间

add_filter( \'changeme_deferred_stylesheets\', function( $handles ) {
    $handles[] = \'font-awesome\';
    return $handles;
}, 10, 1 );

<如果你想确保它只影响网站面向公众的一面，而不是wp-admin, 您可以为添加检查! is_admin() 以及（特别是对于常用的库，如Font Awesome 或Select2):

add_filter( \'changeme_deferred_stylesheets\', function( $handles ) {
    if ( ! is_admin() ) {
        $handles[] = \'font-awesome\';
    }
    return $handles;
}, 10, 1 );

我还更新了onload 基于Scott Jehl的方法The Simplest Way to Load CSS Asynchronously （2019）但如果您要这样做，您可能还想阅读；异步CSS“；哈里·罗伯茨的一段The Fastest Google Fonts （2020）来了解他为什么也建议预加载。

我真的理解你们两个，但我想指出以下几点Keith Clark\'s advice 只是在遵循另一个坏习惯。我也明白，这是2016年提出和回答的问题，大多数事情都会变得更好或更糟

如果需要延迟样式表，那么我建议您：

// I use get_footer to put my stylesheets in the footer
function add_footer_styles() {
    // Example loading external stylesheet, could be used in both a theme and/or plugin
    wp_enqueue_style( \'font-awesome-5\', \'https://use.fontawesome.com/releases/v5.5.0/css/all.css\', array(), null );

    // Example theme
    wp_enqueue_style( \'font-awesome-5\', get_theme_file_uri( \'/assets/css/fontawesome.min.css\' ), array(), null );

    // Example plugin
    wp_enqueue_style( \'font-awesome-5\', plugins_url( \'/assets/css/fontawesome.min.css\', __FILE__ ), array(), null );
};
add_action( \'get_footer\', \'add_footer_styles\' );

Integrity and crossorigin
如果您在外部添加字体Awesome 5，我还建议使用integrity 和crossorigin, 有关添加属性的更多详细信息，请参见我的其他答案：How to add crossorigin and integrity to wp_register_style? (Font Awesome 5)

function add_font_awesome_5_cdn_attributes( $html, $handle ) {
    if ( \'font-awesome-5\' === $handle ) {
        return str_replace( "media=\'all\'", "media=\'all\' integrity=\'sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU\' crossorigin=\'anonymous\'", $html );
    }
    return $html;
}
add_filter( \'style_loader_tag\', \'add_font_awesome_5_cdn_attributes\', 10, 2 );