Czcionki Google przerywają URL Sprawdzanie poprawności HTML5 na w3.org

187

Ładuję 3 czcionki w różnych rozmiarach za pomocą tego znacznika 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">

Do ~ 1/2 tygodnie temu było to obsługiwane przez walidator w3.org dla HTML5; teraz wyświetla ten błąd:

 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.

Czego nie lubi teraz W3C Markup Validator?

html w3c-validation google-font-api Oktawian
źródło

Odpowiedzi:

346

URL koduje |(znaki potoku) w hrefatrybucie ( %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
źródło
1
Czy to problem z generowanym przez Google adresem URL czy problem z walidatorem w3? Czy jakaś specyfikacja faktycznie wymaga zakodowania znaku potoku w atrybucie HTML?
Mikko Rantalainen,
2
@MikkoRantalainen, RFC 1738 zauważa, że ​​znak potoku jest niebezpieczny: inne znaki są niebezpieczne, ponieważ bramy i inni agenci transportowi czasami modyfikują takie znaki. Te znaki to „{”, „}”, „|”, „\”, „^”, „~”, „[”, „]” i „'”.
steveax,
2
Spodziewam się surowy UTF-8 ważność w UTF-8 bez kodowania HTML inne znaki, ale te stosowane dla HTML przykład &, "i '. Te znaki specjalne będą musiały zostać zakodowane przez reguły HTML (np. &ampItp.). Następnie agent użytkownika powinien postępować zgodnie z RFC 3987 i przekonwertować IRI na kodowany procentowo UTF-8 przed przesłaniem go przez HTTP ( tools.ietf.org/html/rfc3987 ).
Mikko Rantalainen
10

Istnieją 2 sposoby rozwiązania tego problemu z weryfikacją:

  1. URL koduje |znak (pionowy pasek / linia) w hrefatrybucie linkelementu (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. Oddzielne dołączanie czcionek z wieloma linkelementami:

    <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
źródło
2
Wiem, że to starszy post, ale czy ktoś wie, czy istnieje separacja <link>tagów z korzyścią (brakiem) wydajności ? Czy Google kompresuje, jeśli w jednym wywołaniu jest wiele czcionek?
Patrick Moore,
@PatrickMoore 2 rzeczy: a) prędkość wysyłania / odpowiedzi serwera w porównaniu do prędkości pobierania użytkownika końcowego b) czas utworzenia kolejnego połączenia (czas odpowiedzi serwera vs czas odpowiedzi użytkownika końcowego), teoretycznie, jeśli ładujesz 2 „ciężkie” czcionki a Twoja strona ładuje się szybko, ładowanie ich osobno (równolegle) może spowodować szybsze ładowanie. Ale to naprawdę zależy od a) ib)
jave.web
7

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

Musisz zastąpić znak | przez odpowiadający mu znak UTF-8, co daje

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

Moja sprawa była szaloną postacią łamania linii. Zobacz załączony obraz.wprowadź opis zdjęcia tutaj

Cóż, Smith
źródło
-4

Scape'uję & z „ & amp; ” i działa dobrze, przykład:

<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
źródło
1
To pytanie dotyczy |charakteru, nie &;-)
jave.web