URL do Google fonts quebra a validação HTML5 em w3.org

187

Carrego 3 fontes em tamanhos diferentes usando esta tag HTML:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif">

Até ~ 1/2 semanas atrás, isso era suportado pelo validador w3.org para HTML5; agora dá este erro:

 Line 14, Column 163: Bad value http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif for attribute href on element link: Illegal character in query: not a URL code point.

Quais são as coisas que o W3C Markup Validator não gosta agora?

html w3c-validation google-font-api Otaviano
fonte

Respostas:

346

O URL codifica os |(caracteres de barra vertical) no hrefatributo ( %7C):

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">
steveax
fonte
1
Esse é um problema com o URL gerado pelo Google ou com o validador w3? Alguma especificação realmente exige que o caractere de pipe seja codificado no atributo HTML?
Mikko Rantalainen
2
@MikkoRantalainen, a RFC 1738 observa que o caractere de pipe não é seguro: Outros caracteres não são seguros porque, por vezes, sabe-se que gateways e outros agentes de transporte modificam esses caracteres. Esses caracteres são "{", "}", "|", "\", "^", "~", "[", "]" e "` ".
steveax
2
Eu esperaria que o UTF-8 bruto fosse válido no HTML codificado em UTF-8 sem codificar outros caracteres, mas aqueles usados ​​para HTML &, por exemplo , "e '. E esses caracteres especiais precisariam ser codificados pelas regras HTML (por exemplo, &ampetc). Espera-se que o agente do usuário siga o RFC 3987 e converta o IRI em UTF-8 codificado em porcentagem antes de enviá-lo por HTTP ( tools.ietf.org/html/rfc3987 ).
Mikko Rantalainen 23/10
10

Existem 2 maneiras de corrigir esse problema de validação:

  1. O URL codifica o caractere |(barra / linha vertical) no hrefatributo do linkelemento (as %7C):

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif">

  2. Separe fontes de inclusão com vários linkelementos:

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Serif:400,400italic">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bree+Serif">
dippas
fonte
2
Sei que esse post é mais antigo, mas alguém sabe se existe alguma (des) vantagem de desempenho na separação de <link>tags? O Google comprime se várias fontes estiverem em uma chamada?
Patrick Moore
@PatrickMoore 2 coisas: a) velocidade de upload / resposta do servidor versus velocidade de download do usuário final b) tempo para criar outra conexão (tempo de resposta do servidor versus tempo de resposta do usuário final), teoricamente, se você estiver carregando 2 fontes "pesadas" caso contrário, sua página será carregada rapidamente. Carregá-las separadamente (de maneira paralela) pode resultar em carregamento mais rápido. Mas, na verdade, depende de a) eb)
jave.web
7

http://www.utf8-chartable.de/

Você deve substituir o caractere | pelo seu caractere UTF-8 correspondente, que fornece

href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&amp;effect=shadow-multiple"
lapouth
fonte
-3

Meu caso foi um personagem louco de quebra de linha. Por favor veja a imagem anexada.insira a descrição da imagem aqui

Well Smith
fonte
-4

Escapa e com " & amp; " e funciona bem, por exemplo:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />
Oscar Tello
fonte
1
Esta pergunta é sobre |caráter, não &;-)
jave.web