URL des polices Google rompt la validation HTML5 sur w3.org

Question

Je charge 3 polices de différentes tailles en utilisant 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, ceci était supporté par validateur w3.org pour HTML5; maintenant cela 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.

Qu'est-ce que le validateur de balisage W3C n'aime pas maintenant?

Answer 1

L'URL code le | (caractères de canal) dans l'attribut 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 2

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

Vous devez remplacer le personnage | 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&effect=shadow-multiple"

Answer 3

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

1. L'URL code le caractère | (barre/ligne verticale) dans l'attribut href de l'élément link (sous la forme %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 séparée avec plusieurs éléments 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">