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

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ą:

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

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.

— 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