使Google Web字体排入队列,而不会弄乱URL中的符号


9

使用通常的方法使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被编码

我敢肯定,它不会造成任何问题,但是为了保持内容的整洁,我想问一问-是否有一种方法可以通过functions.phpURL输出使Google Web字体(通过插件而不是通过插件)入队没有编码?

就像这样:

<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的答案几乎是完美的,特别是因为它类似于将“ Open Sans” Google Web字体排入“二十二十二”主题中所采用的方法。

输出中的唯一问题是:

<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除非您使用URL 的参数,否则忽略&它的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' />

赢得赏金


不太清楚您要在这里做什么;您是否要具有latin + latin-ext子集(这样做),还是不希望它不成为子集(可以通过从数组中删除'subset'元素来实现)?
webaware

Answers:


24

WordPress知道它在做什么。诚实。

在HTML中呈现与号时,应始终使用&amp;&#038;。然后,浏览器&在实际触发HTTP请求之前将其转换为。通过在Web检查器工具中检查网络调用来亲自查看。您实际上并没有丢失非拉丁子集。

请注意&#038;?应该为&,否则提供的字体文件仅包含拉丁字形(即,除非您使用&而不使用其HTML实体,否则忽略URL中的subset参数)。

这告诉我您已经检查了源代码,发现有逃逸的“&”号,而没有实际验证结果。是的,当您在地址栏中粘贴带有转义符的URL时,就会发生这种情况。但是当您在HTML src或href属性中具有正确编码和转义的URL时,则不会。

您应该查看http://www.blooberry.com/indexdot/html/topics/urlencoding.htm,以获得其他不安全和保留的字符。两组都应始终进行编码。


1
非常好的解释,感谢您抽出宝贵的时间安德鲁!
webaware

因此,您说的是...当您在HTML src或href属性(即http://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext)中具有正确编码的URL时,浏览器对待它的方式等同于用户在其中输入http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(即使用实际&而不是HTML实体)地址栏。那是对的吗?如果是这样,感谢您的明确解释。:)
its_me 2012年

2
正确。我对答案进行了略微修改,以使其更加清晰。在这种情况下,“&”号是转义的HTML实体,而不是URL编码。不应对其进行编码(应为%38),因为它已以其特殊的URL角色使用。URL编码保留的或不安全的字符等|:或空格是分开的,并且还鼓励。
安德鲁·纳辛

@AndrewNacin:只是一个小问题,但是:blooberry.com的URL实际上是关于URL编码字符,而不是HTML编码字符。您要解决的问题是后者,而不是前者。
webaware

我在回答和评论中都谈到了这一点。您在最初的问题中都担心这两个问题。
安德鲁·纳辛

5

试试这个(也可以处理HTTP vs 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' );

偶然地,这是基于“ 十二十二”主题吗?:P
its_me 2012年

很可能在我看到它的地方:),但现在都只是套件的一部分。
webaware 2012年

1
实际上,它们是相同的。浏览器看到&#038;&,准确的负荷相同的URI。为了测试,我同时加载了简单的HTML页面,并在加载之前清除了缓存;两者都加载了相同的字体文件(相同大小)。尝试一下。
webaware

2

根据此答案,您可以尝试以下未经测试的代码:

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;
}

是的,除了版本控制的方式(错误?)外,它还可以工作。输出看起来像:<link rel='stylesheet' id='google-webfonts-css' href='http://fonts.googleapis.com/css?family=Ubuntu Condensed|Open Sans:400italic,700italic,400,700&#038;ver=3.5' type='text/css' media='all' />-注意&#038; ver = 3.5吗?它应该是?ver = 3.5。有什么想法吗?感谢您的回答。:)
its_me

您不能使用第二个?。这将导致Google的网址无效。
fuxia

http://fonts.googleapis.com/css?family=Ubuntu%20Condensed|Open%20Sans:400italic,700italic,400,700?ver=3.5正在加载就好了。还是我想念你的意思?
its_me 2012年

参数分隔符&不是?。您不能依靠Google的慷慨。
fuxia

不建议使用此函数“ clean_url”-> codex.wordpress.org/Function_Reference/clean_url,您应该使用其他函数。
Ed T.

1

实际上,它是如此简单:

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)的回答

但是我必须感谢大家的努力。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.