Google fonts URL breekt HTML5-validatie op w3.org

Ik laad 3 lettertypen in verschillende formaten met deze HTML-tag:

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

Tot ongeveer een halve week geleden werd dit ondersteund door w3.org validatorvoor HTML5; nu geeft het deze fout:

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.

Wat zijn de dingen die de W3C Markup Validator nu niet leuk vindt?

Antwoord 1, autoriteit 100%

URL codeert de |(pijptekens) in het hrefattribuut (%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">

Antwoord 2, autoriteit 3%

Er zijn 2 manieren om dit validatieprobleem op te lossen:

1. URL codeert het teken |(verticale streep/lijn) in het kenmerk hrefvan het element link(als %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. Afzonderlijke opname van lettertypen met meerdere link-elementen :

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

Antwoord 3, autoriteit 2%

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

Je moet het teken | . vervangen door het bijbehorende UTF-8-teken, wat

. geeft

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

Antwoord 4

Mijn geval was een gek regeleindekarakter. Zie de bijgevoegde afbeelding.

Antwoord 5

Ik scape &met “& amp;” en werkt prima, bijvoorbeeld:

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