Enfileirar fontes da Web do Google sem bagunçar símbolos no URL


9

Enfileirando o Google Web Fonts da maneira usual, ou seja, usando a wp_enqueue_stylefunção da seguinte maneira ...

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 em uma linktag colocada no cabeçalho da seguinte forma:

<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 você pode ver, o URL resultante é codificado .

Tenho certeza de que não apresenta problemas, mas para manter as coisas limpas e claras, gostaria de ir em frente e perguntar - Existe uma maneira de enfileirar o Google Web Fonts (via functions.phpe não um plug-in) de maneira que a URL seja impressa não está codificado?

É assim:

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

Razão da Recompensa

A resposta da @ webaware é quase perfeita, especialmente porque é semelhante ao método empregado na colocação da fonte da Web do Google 'Open Sans' no tema Twenty Twelve .

O único problema na saída é que é assim:

<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 o &#038;? Deveria ser &, caso contrário, os arquivos de fonte servidos têm apenas os latinglifos (ou seja, o subsetparâmetro na URL é negligenciado, a menos que você use &e NÃO sua entidade HTML).

Qualquer pessoa que possa ajudar a modificar a resposta do @ webaware para que a saída fique assim ...

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

... ganha a recompensa.


Não tenho certeza do que você está querendo aqui; você deseja ter subconjuntos latin + latin-ext (o que faz isso) ou não deseja subconjunto (o que pode ser alcançado removendo o elemento 'subconjunto' da matriz)?
Webaware

Respostas:


24

WordPress sabe o que está fazendo aqui. Honesto.

Ao renderizar um e comercial em HTML, você sempre deve usar &amp;or &#038;. O navegador então o converte &antes de realmente disparar a solicitação HTTP. Veja você mesmo inspecionando as chamadas de rede em uma ferramenta de inspeção da web. Na verdade, você não está perdendo seus subconjuntos não-latinos.

Observe o &#038;? Deve ser &, caso contrário, os arquivos de fonte servidos têm apenas os glifos em latim (ou seja, o parâmetro do subconjunto na URL é negligenciado, a menos que você use & e NÃO sua entidade HTML).

Isso indica que você inspecionou a fonte para verificar se existe um e comercial em fuga, sem realmente verificar o comportamento resultante. Sim, isso ocorre quando você cola um URL com um e comercial escapado em uma barra de endereço. Mas não quando você tiver um URL codificado e escapado corretamente em um atributo HTML src ou href.

Você deve procurar em http://www.blooberry.com/indexdot/html/topics/urlencoding.htm quanto a caracteres adicionais não seguros e reservados. Ambos os grupos devem sempre ser codificados.


1
Uma explicação muito boa, obrigado por reservar um tempo, Andrew!
Webaware

Então, você está dizendo ... quando você tem um URL codificado corretamente em um atributo src ou href HTML (ou seja http://fonts.googleapis.com/css?family=Ubuntu+Condensed&#038;subset=latin,latin-ext), a maneira como o navegador o trata é equivalente ao acesso do usuário http://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext(ou seja, com a &entidade real e não a HTML) em a barra de endereço. Isso está correto? Nesse caso, obrigado pela explicação clara. :)
its_me

2
Corrigir. Editei minha resposta um pouco para torná-la um pouco mais clara. Nesse caso, o e comercial é uma entidade HTML com escape, não codificada por URL. Não deve ser codificado (o que seria %38) porque está sendo usado em sua função de URL especial. URL codifica um caráter reservado ou inseguro como |, :ou espaços são separados, e também incentivou.
Andrew Nacin

@AndrewNacin: apenas um ponto, mas: esse URL para blooberry.com é realmente sobre caracteres de codificação de URL, não caracteres de codificação HTML. O problema que você está abordando é o último, não o primeiro.
Webaware

Eu falei sobre ambos na minha resposta e comente. Você estava preocupado com os dois na sua pergunta original.
Andrew Nacin

5

Tente isso (também manipulará 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 acaso, isso é baseado no tema dos vinte e doze ? : P
its_me 26/12/12

Muito provavelmente onde eu vi :), mas agora tudo faz parte do kit.
Webaware

1
Na verdade, eles são os mesmos. O navegador vê &#038;como &e cargas exatamente o mesmo URI. Para testar, carreguei páginas HTML simples com ambos e limpei o cache antes de carregar; ambos carregaram os mesmos arquivos de fonte (mesmo tamanho). Tente.
Webaware

2

Com base nesta resposta, você pode tentar algo como este código não testado :

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

Sim, meio que funciona, exceto pela maneira como o versionamento é feito (errado?). A saída é semelhante a: <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' />- observe = ver 3.5 ? Deveria ser ? Ver = 3.5 . Alguma solução em mente? Obrigado pela resposta. :)
its_me 25/12/12

Você não pode usar um segundo ?. Isso resultaria em um URL inválido para o Google.
fuxia

http://fonts.googleapis.com/css?family=Ubuntu%20Condensed|Open%20Sans:400italic,700italic,400,700?ver=3.5está carregando muito bem. Ou estou perdendo o seu ponto?
its_me

O separador de argumentos &não é ?. Você não pode confiar na generosidade do Google.
fuxia

Esta função foi descontinuada "clean_url" -> codex.wordpress.org/Function_Reference/clean_url , você deve usar outra.
Ed T.

1

Na verdade, é tão simples quanto isto:

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

E isso deve gerar:

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

Isso é muito parecido com o que eu queria (só lamento é que &se torna &#038;na saída). Mas então percebi que isso não importa, em grande parte, graças à resposta de Andrew Nacin .

Mas devo agradecer a todos por seus esforços.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.