WordPress 排列 Google 网页字体，而不会在 URL 中传送符号

问题描述

以通常的方式排队 Google Web 字体，即使用像 wp_enqueue_style 这样的功能…

function wpse_google_webfonts() {
    wp_enqueue_style( 'google-webfonts', 'http://googlefonts.admincdn.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700' );
}
add_action( 'wp_enqueue_scripts', 'wpse_google_webfonts' );

… 导致 link 标签放置在标题中，如下所示：

<link rel='stylesheet' id='google-webfonts-css'  href='http://googlefonts.admincdn.com/css?family=Ubuntu+Condensed%7COpen+Sans%3A400italic%2C700italic%2C400%2C700&ver=3.5' type='text/css' media='all' />

您可以看到，结果网址被编码。

我很确定它没有问题，但为了保持清洁和清晰，我想继续问 – 有没有办法排入 Google Web 字体 (通过 functions.php 而不是插件)，URL 的方式输出不编码？

就这样：

<link rel='stylesheet' id='google-webfonts-css'  href='http://googlefonts.admincdn.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700?ver=3.5' type='text/css' media='all' />

赏金原因

@ webaware 的答案接近完美，特别是因为它类似于 enqueuing ‘Open Sans’ Google Web Font in the Twenty Twelve 主题中使用的方法。

输出中唯一的问题就是这样：

<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://googlefonts.admincdn.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' />

注意&？它应该是&，否则 font-files 只服务于 latin 字形 (除非您使用& 而不是其 HTML 实体，否则 URL 中的 subset 参数被忽略) 。

任何人谁可以帮助修改 @ webaware 的答案，使输出看起来像这样…

<link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://googlefonts.admincdn.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' />

赢得赏金。

最佳解决方案

WordPress 知道这是在做什么。诚实。

在 HTML 中呈现& 符时，应始终使用& 或& 。浏览器然后将其转换为&，然后才能实际触发 HTTP 请求。通过检查 Web 检查器工具中的网络呼叫来查看自己。你实际上并没有丢失你的 non-latin 子集。

Notice the &? It should be &, otherwise the font-files served only have the latin glyphs (i.e. the subset parameter in the URL is neglected unless you use & and NOT its HTML entity).

这告诉我，你已经检查了源代码，看到有一个转义的& 符号，而不实际验证结果的行为。是的，当您在地址栏中粘贴已转义的& 符号的 URL 时，会发生这种情况。但是当您在 HTML src 或 href 属性中具有正确编码和转义的 URL 时，不会。

您应该查看 http://www.blooberry.com/indexdot/html/topics/urlencoding.htm 的其他不安全和保留字符。这两个组都应该被编码。

次佳解决方案

尝试这个 (也将处理 HTTP 与 HTTPS)：

function wpse_google_webfonts() {
    $protocol = is_ssl() ? 'https' : 'http';
    $query_args = array(
        'family' => 'Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700',
        'subset' => 'latin,latin-ext',
    );

    wp_enqueue_style('google-webfonts',
        add_query_arg($query_args, "$protocol://googlefonts.admincdn.com/css" ),
        array(), null);
}

add_action( 'wp_enqueue_scripts', 'wpse_google_webfonts' );

参考文献

Enqueue Google Web Fonts Without Messing Up Symbols In URL

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 排列 Google 网页字体，而不会在 URL 中传送符号