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 中傳送符號