validator - Google fonts URL break Validación HTML5 en w3.org

w3 xml validator

Question

Puedo cargar 3 fuentes en diferentes tamaños con esta etiqueta 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">

Hasta hace ~ 1/2 semanas, esto fue respaldado por el validador de w3.org para HTML5; ahora da este error:

 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.

¿Qué es lo que no le gusta al Validador de marcado W3C ahora?

Answer 1

Hay 2 formas de solucionar este problema de validación:

1. URL codifica el | (barra vertical / línea) carácter en el atributo href del elemento de link (como %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. Separar la inclusión de fuentes con múltiples elementos de link :

   <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">

Answer 2

Icape & con " & amp; " y funciona bien, por ejemplo:

<link href=''http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&amp;subset=latin,latin-ext'' rel=''stylesheet'' type=''text/css'' />

Answer 3

Url codifica el | (caracteres de tubería) en el atributo href ( %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">

Answer 4

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

Debes reemplazar el personaje | por su correspondiente carácter UTF-8, que da

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