在不处理URL中的符号的情况下将Google Web字体排入队列

时间:2012-12-25 作者:its_me

以通常的方式将Google Web字体排队,即使用wp_enqueue_style 像这样工作。。。

function wpse_google_webfonts() {
    wp_enqueue_style( \'google-webfonts\', \'http://fonts.googleapis.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://fonts.googleapis.com/css?family=Ubuntu+Condensed%7COpen+Sans%3A400italic%2C700italic%2C400%2C700&#038;ver=3.5\' type=\'text/css\' media=\'all\' />
如您所见,结果URL为encoded.

我很确定这不会带来任何问题,但为了保持事情的干净和清晰,我想问一下——有没有办法将Google Web字体(通过functions.php 而不是一个插件),以一种不编码URL输出的方式?

是这样的:

<link rel=\'stylesheet\' id=\'google-webfonts-css\'  href=\'http://fonts.googleapis.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://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext\' type=\'text/css\' media=\'all\' />
请注意&#038;? 应该是的&, 否则,提供的字体文件只有latin 图示符(即subset 除非使用& 而不是其HTML实体)。

任何可以帮助修改@webaware答案的人,以便输出如下所示。。。

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

4 个回复
最合适的回答,由SO网友:Andrew Nacin 整理而成

WordPress知道它在这里做什么。诚实的

在HTML中呈现符号时,应始终使用&amp;&#038;. 然后浏览器将其转换为& 在实际触发HTTP请求之前。通过在web检查器工具中检查网络调用,您可以自己查看。你并没有失去你的非拉丁语子集。

请注意&#038;? 应该是(&;);,否则,所提供的字体文件只有拉丁文标志符号(即URL中的子集参数被忽略,除非您使用&;而不是其HTML实体)。

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

你应该仔细看看http://www.blooberry.com/indexdot/html/topics/urlencoding.htm 用于其他不安全和保留字符。应始终对这两个组进行编码。

SO网友:webaware

试试这个(也可以处理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://fonts.googleapis.com/css" ),
        array(), null);
}

add_action( \'wp_enqueue_scripts\', \'wpse_google_webfonts\' );

SO网友:fuxia

基于this answer 您可以尝试以下未经测试的代码:

add_filter( \'clean_url\', \'wpse_77227_decode_googlefont_url\' );

function wpse_77227_decode_googlefont_url( $url )
{
    $host = parse_url ($url, PHP_URL_HOST );

    if ( \'fonts.googleapis.com\' === $host )
        return urldecode( $url );

    return $url;
}

SO网友:its_me

事实上,这很简单:

wp_enqueue_style( \'google-webfonts\', \'http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext\', array(), null );
这应该会输出:

<link rel=\'stylesheet\' id=\'google-webfonts-css\'  href=\'http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700&#038;subset=latin,latin-ext\' type=\'text/css\' media=\'all\' />
这与我想要的非常接近(唯一遗憾的是& 成为&#038; 在输出中)。但后来我意识到这并不重要,真的,主要是因为Andrew Nacin\'s answer.

但我必须感谢大家的努力

结束