如何合并 Google 字体导入

Question

我正在使用带有 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' />

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

Answer 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

Answer 2

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

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

另一种解决方案是 Easy Fonts，但它将所有字体合并为一个 URL，而不是让您选择要合并的字体：

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

Answer 3

我用过 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 gives the font face a zero second block period and an infinite swap period. This means the browser draws text immediately with a fallback if the font face isn’t loaded, but swaps the font face in as soon as it loads. Similar to block, this value should only be used when rendering text in a particular font is important for the page, but rendering in any font will still get a correct message across. Logo text is a good candidate for swap since displaying a company’s name using a reasonable fallback will get the message across but you’d eventually use the official typeface.

如何合并 Google 字体导入

How to combine Google Fonts imports

wordpress

httprequest

google-webfonts