如何结合谷歌字体导入答案

【问题标题】：How to combine Google Fonts imports如何结合谷歌字体导入
【发布时间】：2015-11-26 12:34:38
【问题描述】：

我正在使用带有 Divi 主题的 Wordpress，

有这个代码：

    function et_divi_fonts_url() {
    $fonts_url = '';

    /* Translators: If there are characters in your language that are not
     * supported by Open Sans, translate this to 'off'. Do not translate
     * into your own language.
     */
    $open_sans = _x( 'on', 'Open Sans font: on or off', 'Divi' );

    if ( 'off' !== $open_sans ) {
        $font_families = array();

        if ( 'off' !== $open_sans )
            $font_families[] = 'Open+Sans:300italic,400italic,700italic,800italic,400,300,700,800';

        $protocol = is_ssl() ? 'https' : 'http';
        $query_args = array(
            'family' => implode( '%7C', $font_families ),
            'subset' => 'latin,latin-ext',
        );
        $fonts_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );
    }

    return $fonts_url;
}

生成此输出：

<link rel='stylesheet' id='tp-open-sans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C400%2C600%2C700%2C800&#038;ver=4.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='tp-raleway-css'  href='http://fonts.googleapis.com/css?family=Raleway%3A100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900&#038;ver=4.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='tp-droid-serif-css'  href='http://fonts.googleapis.com/css?family=Droid+Serif%3A400%2C700&#038;ver=4.2.4' type='text/css' media='all' />
<link rel='stylesheet' id='et_monarch-open-sans-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' type='text/css' media='all' />
<link rel='stylesheet' id='divi-fonts-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,800italic,400,300,700,800&#038;subset=latin,latin-ext' type='text/css' media='all' />

我想知道是否有一种简单的方法可以将所有这些资源组合到一个请求中？

【问题讨论】：

标签： wordpress httprequest google-webfonts

【解决方案1】：

取自https://developers.google.com/fonts/docs/getting_started?hl=en：

要请求多个字体系列，请用竖线字符 (|) 分隔名称。

例如，请求 Tangerine、Inconsolata 和 Droid Sans 字体：

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

【讨论】：

【解决方案2】：

我用过 https://developers.google.com/fonts/docs/css2

例子

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:wght@300;400;600;700;800&family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap">

显示=交换

https://developers.google.com/web/updates/2016/02/font-display

swap 给字体表面一个零秒的块周期和一个无限交换期。这意味着浏览器会立即使用如果字体未加载，则回退，但将字体交换为一旦加载。和block类似，这个值只能用当以特定字体呈现文本对页面很重要时，但是以任何字体呈现仍然会得到正确的消息。徽标文本是交换的理想选择，因为显示公司的使用合理后备的名称将传达信息，但您会最终使用官方字体。

【讨论】：

【解决方案3】：

一个解决方案是这个Google Font Optimization 工具。

您可以在此工具中插入多个字体 URL，并获得一个干净的 URL 作为回报。

另一种解决方案是Easy Fonts，但它将所有字体组合在一个 URL 中，而不是允许您选择要组合的字体：

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

【讨论】：