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.