Validation HTML5 de rupture d'URL des polices Google sur w3.org

187

Je charge 3 polices de tailles différentes à l'aide de cette balise 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">

Jusqu'à il y a environ 1/2 semaines, cela était pris en charge par le validateur w3.org pour HTML5; maintenant il donne cette erreur:

 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.

Quelles sont les choses que le validateur de balisage W3C n'aime pas maintenant?

html w3c-validation google-font-api Octave
la source

Réponses:

346

L'URL encode les |(caractères pipe) dans l' hrefattribut ( %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
la source
1
Est-ce un problème avec l'URL générée par Google ou un problème avec le validateur w3? Une spécification nécessite-t-elle réellement l'encodage du caractère pipe dans l'attribut HTML?
Mikko Rantalainen
2
@MikkoRantalainen, RFC 1738 note que le caractère pipe n'est pas sûr: d'autres caractères sont dangereux car les passerelles et autres agents de transport sont connus pour modifier parfois ces caractères. Ces caractères sont "{", "}", "|", "\", "^", "~", "[", "]" et "` ".
steveax
2
Je m'attendrais à ce que l'UTF-8 brut soit valide en HTML encodé en UTF-8 sans encoder d'autres caractères, mais ceux utilisés pour HTML par exemple &, "et '. Et ces caractères spéciaux devraient être encodés par des règles HTML (par exemple, &ampetc.). L'agent utilisateur doit alors suivre la RFC 3987 et convertir l'IRI en UTF-8 codé en pourcentage avant de le soumettre via HTTP ( tools.ietf.org/html/rfc3987 ).
Mikko Rantalainen
10

Il existe 2 façons de résoudre ce problème de validation:

  1. L'URL encode le caractère |(barre verticale / ligne) dans l' hrefattribut de l' linkélément (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. Inclusion de polices distinctes avec plusieurs linkéléments:

    <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
la source
2
Je sais qu'il s'agit d'un article plus ancien, mais est-ce que quelqu'un sait s'il y a un (dés) avantage en termes de performances à <link> balises? Google compresse-t-il si plusieurs polices sont en un seul appel?
Patrick Moore
@PatrickMoore 2 choses: a) la vitesse de téléchargement / réponse de votre serveur vs la vitesse de téléchargement de votre utilisateur final b) le temps de créer une autre connexion (temps de réponse du serveur vs temps de réponse de l'utilisateur final), théoriquement, si vous chargez 2 polices «lourdes» et votre page se charge autrement rapidement, les charger séparément (de manière parallèle) pourrait entraîner un chargement plus rapide. Mais cela dépend vraiment de a) et b)
jave.web
7

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

Vous devez remplacer le caractère | par son caractère UTF-8 correspondant, ce qui donne

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

Mon cas était un caractère fou de saut de ligne. Veuillez voir l'image ci-jointe.entrez la description de l'image ici

Eh bien Smith
la source
-4

Je scape & avec " & amp; " et fonctionne très bien, exemple:

<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
la source
1
Cette question concerne le |caractère, pas &;-)
jave.web