La fuente de Google rompe URL Validación HTML5 en w3.org

187

Cargo 3 fuentes en diferentes tamaños usando 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 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é cosas no le gustan ahora al Validador de marcado W3C?

html w3c-validation google-font-api Octavio
fuente

Respuestas:

346

La URL codifica los |(caracteres de canalización) en el 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
fuente
1
¿Es este un problema con la URL generada por Google o un problema con el validador w3? ¿Alguna especificación realmente requiere que el carácter de tubería se codifique en el atributo HTML?
Mikko Rantalainen
2
@MikkoRantalainen, RFC 1738 señala que el carácter de la tubería no es seguro: otros caracteres no son seguros porque las puertas de enlace y otros agentes de transporte a veces modifican dichos caracteres. Estos caracteres son "{", "}", "|", "\", "^", "~", "[", "]" y "` ".
Steveax
2
Esperaría que UTF-8 sin formato sea válido en HTML codificado en UTF-8 sin codificar otros caracteres, pero aquellos utilizados para HTML &, por ejemplo , "y' . Y esos caracteres especiales tendrían que estar codificados por reglas HTML (por ejemplo, &ampetc.). Se espera que el agente de usuario siga RFC 3987 y convierta el IRI a UTF-8 codificado en porcentaje antes de enviarlo a través de HTTP ( tools.ietf.org/html/rfc3987 ).
Mikko Rantalainen
10

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

  1. La URL codifica el carácter |(barra / línea vertical) en el hrefatributo del 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. Inclusión de fuentes separadas con múltiples 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
fuente
2
Sé que esta es una publicación anterior, pero ¿alguien sabe si hay alguna (des) ventaja de rendimiento al separar las <link>etiquetas? ¿Google comprime si hay varias fuentes en una llamada?
Patrick Moore
@PatrickMoore 2 cosas: a) la velocidad de carga / respuesta del servidor frente a la velocidad de descarga del usuario final b) el tiempo para crear otra conexión (tiempo de respuesta del servidor frente al tiempo de respuesta del usuario final), teóricamente, si está cargando 2 fuentes "pesadas" y, de lo contrario, su página se está cargando rápidamente, cargándolas por separado (de forma paralela) podría resultar en una carga más rápida. Pero realmente depende de a) yb)
jave.web
7

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&amp;effect=shadow-multiple"
lapouth
fuente
-3

Mi caso fue un loco personaje de salto de línea. Por favor, vea la imagen adjunta.ingrese la descripción de la imagen aquí

Bien Smith
fuente
-4

Escapo & con " & amp; " y funciona bien, ejemplo:

<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
fuente
1
Esta pregunta es sobre el |personaje, no &;-)
jave.web