Enqueue Google Web Fonts mà không làm rối các biểu tượng trong URL

Sử dụng Google Web Fonts theo cách thông thường, nghĩa là sử dụng wp_enqueue_stylechức năng như vậy ...

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' );

... Kết quả là một linkthẻ được đặt trong tiêu đề như vậy:

<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' />

Như bạn có thể thấy, URL kết quả được mã hóa .

Tôi khá chắc chắn rằng nó không gây ra vấn đề gì, nhưng để giữ mọi thứ sạch sẽ và rõ ràng, tôi muốn tiếp tục và hỏi - Có cách nào để chinh phục Google Web Fonts (thông qua functions.phpvà không phải là plugin) theo cách mà URL xuất ra không được mã hóa?

Giống như vậy:

<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' />

Lý do cho tiền thưởng

Câu trả lời của @ webkn gần như hoàn hảo, đặc biệt là vì nó tương tự như phương pháp được sử dụng trong việc mê hoặc 'Phông chữ Web Google' của Sans trong chủ đề Twenty Tw 12 .

Vấn đề duy nhất ở đầu ra là nó như thế này:

<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' />

Thông báo &? Nó phải được &, nếu không thì font-file phục vụ chỉ có latinglyphs (tức là subsettham số trong URL sẽ bị bỏ qua trừ khi bạn sử dụng &và không thực thể HTML của nó).

Bất cứ ai có thể giúp sửa đổi câu trả lời của @ webkn để đầu ra trông như thế này ...

<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' />

... thắng tiền thưởng.

WordPress biết những gì nó đang làm ở đây. Thật thà.

Khi kết xuất ký hiệu và HTML, bạn phải luôn sử dụng &hoặc &. Trình duyệt sau đó chuyển đổi nó thành &trước khi thực sự thực hiện yêu cầu HTTP. Xem cho chính mình bằng cách kiểm tra các cuộc gọi mạng trong một công cụ kiểm tra web. Bạn không thực sự mất tập hợp phi Latin của bạn.

Thông báo &? Nó phải là &, nếu không, các tệp phông chữ được cung cấp chỉ có các glyph Latin (tức là tham số tập hợp con trong URL bị bỏ qua trừ khi bạn sử dụng & và KHÔNG phải là thực thể HTML của nó).

Điều này cho tôi biết bạn đã kiểm tra nguồn để thấy rằng có một dấu và thoát, mà không thực sự xác minh hành vi kết quả. Có, nó xảy ra khi bạn dán một URL với dấu và thoát trong thanh địa chỉ. Nhưng không phải khi bạn có một URL được mã hóa và thoát đúng trong thuộc tính src or href.

Bạn nên xem qua http://www.blooberry.com/indexdot/html/topics/urlencoding.htmlm để biết thêm các ký tự không an toàn và dành riêng. Cả hai nhóm phải luôn được mã hóa.

Hãy thử điều này (cũng sẽ xử lý 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' );

Dựa trên câu trả lời này, bạn có thể thử một cái gì đó giống như mã chưa được kiểm tra này :

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

Trên thực tế, nó đơn giản như thế này:

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

Và điều đó sẽ xuất ra:

<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' />

Điều đó khá gần với những gì tôi muốn (chỉ tiếc là nó &trở thành &đầu ra). Nhưng sau đó tôi nhận ra nó không thành vấn đề, thực sự, phần lớn là nhờ câu trả lời của Andrew Nacin .

Nhưng tôi phải cảm ơn mọi người vì những nỗ lực của họ.