Poner en cola las fuentes web de Google sin confundir los símbolos en la URL


9

Poner en contacto las fuentes web de Google de la manera habitual, es decir, usar la wp_enqueue_stylefunción de esta manera ...

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

... resulta en una linketiqueta colocada en el encabezado así:

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

Como puede ver, la URL resultante está codificada .

Estoy bastante seguro de que no plantea problemas, pero para mantener las cosas limpias y claras, me gustaría seguir adelante y preguntar: ¿hay alguna manera de poner en contacto las fuentes web de Google (a través de functions.phpun complemento y no un complemento) de manera que la salida de URL no está codificado?

Eso es así:

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

Motivo de la generosidad

La respuesta de @webaware es casi perfecta, especialmente porque es similar al método empleado para obtener la fuente web de Google 'Open Sans' en el tema Twenty Twelve .

El único problema en el resultado es que es así:

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

Observe el &#038;? Debería serlo &, de lo contrario, los archivos de fuente servidos solo tienen los latinglifos (es decir, el subsetparámetro en la URL se descuida a menos que lo use &y NO su entidad HTML).

Cualquiera que pueda ayudar a modificar la respuesta de @ webaware para que la salida se vea así ...

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

... gana la recompensa.


No estoy muy seguro de lo que quieres aquí; ¿Desea tener subconjuntos latin + latin-ext (que esto hace), o desea que no se subconjunte (lo que se puede lograr eliminando el elemento 'subconjunto' de la matriz)?
webaware

Respuestas:


24

WordPress sabe lo que está haciendo aquí. Honesto.

Al representar un ampersand en HTML, siempre debe usar &amp;o &#038;. El navegador luego lo convierte &antes de disparar la solicitud HTTP. Compruébelo usted mismo inspeccionando las llamadas de red en una herramienta de inspección web. En realidad no estás perdiendo tus subconjuntos no latinos.

Observe el &#038;? Debe ser &, de lo contrario, los archivos de fuente servidos solo tienen los glifos latinos (es decir, el parámetro del subconjunto en la URL se descuida a menos que use & y NO su entidad HTML).

Esto me dice que ha inspeccionado la fuente para ver que hay un ampersand escapado, sin verificar realmente el comportamiento resultante. Sí, ocurre cuando pega una URL con un signo de escape en una barra de direcciones. Pero no cuando tiene una URL correctamente codificada y escapada en un atributo HTML src o href.

Debería consultar http://www.blooberry.com/indexdot/html/topics/urlencoding.htm para obtener caracteres adicionales inseguros y reservados. Ambos grupos siempre deben estar codificados.


1
Una muy buena explicación, gracias por tomarse el tiempo Andrew!
webaware

Entonces, usted está diciendo ... cuando tiene una URL codificada correctamente en un atributo HTML src o href (es decir http://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext), la forma en que el navegador lo trata es equivalente a la entrada del usuario http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(es decir, con la &entidad real y no la entidad HTML) en La barra de direcciones. ¿Es eso correcto? Si es así, gracias por la explicación clara. :)
its_me

2
Correcto. Edité mi respuesta un poco para que quede un poco más claro. En este caso, el ampersand es una entidad HTML escapada, no codificada en URL. No debe codificarse (lo que sería %38) porque se está utilizando en su función de URL especial. URL que codifica un carácter reservado o inseguro como |, :o espacios están separados, y también alentó.
Andrew Nacin

@AndrewNacin: solo un nitput, pero: esa URL a blooberry.com en realidad se trata de caracteres de codificación de URL, no de caracteres de codificación HTML. El problema que está abordando es el último, no el primero.
webaware

Hablé sobre ambos en mi respuesta y comentario. Estabas preocupado por ambos en tu pregunta original.
Andrew Nacin

5

Pruebe esto (también manejará 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' );

Por casualidad, ¿se basa esto en el tema Veinte Doce ? : P
its_me

Muy probablemente donde lo vi :) pero ahora es solo parte del kit.
webaware

1
En realidad, son lo mismo. El navegador ve &#038;como &y cargas exactamente el mismo URI. Para probar, cargué páginas HTML simples con ambos y borré el caché antes de cargar; ambos cargaron los mismos archivos de fuente (mismo tamaño). Intentalo.
webaware

2

Según esta respuesta , puede probar algo como este código no probado :

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

Sí, funciona un poco, excepto la forma en que se realiza el versionado (¿incorrectamente?). La salida se ve así: <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' />- ¿aviso & # 038; ver = 3.5 ? Más bien debería ser ? Ver = 3.5 . ¿Alguna solución en mente? Gracias por la respuesta. :)
its_me

No puedes usar un segundo ?. Eso daría como resultado una URL no válida para Google.
fuxia

http://fonts.googleapis.com/css?family=Ubuntu%20Condensed|Open%20Sans:400italic,700italic,400,700?ver=3.5se está cargando bien. ¿O me estoy perdiendo tu punto?
its_me

El argumento separador es &, no ?. No puede confiar en la generosidad de Google.
fuxia

Esta función ha quedado en desuso "clean_url" -> codex.wordpress.org/Function_Reference/clean_url , debe usar otra.
Ed T.

1

En realidad, es tan simple como esto:

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

Y eso debería dar salida:

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

Eso está bastante cerca de lo que quería (solo lamento ser lo que se &convierte &#038;en salida). Pero luego me di cuenta de que realmente no importa, en gran parte gracias a la respuesta de Andrew Nacin .

Pero debo agradecer a todos por sus esfuerzos.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.