Google Schriftarten URL brechen HTML5-Validierung auf w3.org

187

Ich lade 3 Schriftarten in verschiedenen Größen mit diesem 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">

Bis vor ~ 1/2 Wochen wurde dies vom w3.org-Validator für HTML5 unterstützt. jetzt gibt es diesen Fehler:

 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.

Was mag der W3C Markup Validator jetzt nicht?

html w3c-validation google-font-api

— Octavian
quelle

346

URL codieren die |(Pipe-Zeichen) im 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
quelle

1

Ist dies ein Problem mit der von Google generierten URL oder ein Problem mit dem w3-Validator? Erfordert eine Spezifikation tatsächlich, dass Pipe-Zeichen im HTML-Attribut codiert werden?

— Mikko Rantalainen

2

@MikkoRantalainen, RFC 1738 stellt fest, dass das Pipe-Zeichen unsicher ist: Andere Zeichen sind unsicher, da bekannt ist, dass Gateways und andere Transportagenten solche Zeichen manchmal ändern. Diese Zeichen sind "{", "}", "|", "\", "^", "~", "[", "]" und "` ".

— Steveax

2

Ich würde erwarten , roh UTF-8 in UTF-8 kodierten HTML gültig sein , ohne andere Zeichen zu kodieren , aber die für HTML zB verwendet &, "und '. Und diese Sonderzeichen müssten durch HTML-Regeln (z &amp. B. usw.) codiert werden . Es wird dann erwartet, dass der Benutzeragent RFC 3987 folgt und die IRI in prozentual codiertes UTF-8 konvertiert, bevor er sie über HTTP ( tools.ietf.org/html/rfc3987 ) sendet .

— Mikko Rantalainen

10

Es gibt zwei Möglichkeiten, um dieses Validierungsproblem zu beheben:

URL codiert das |Zeichen (vertikaler Balken / Linie) im hrefAttribut des linkElements (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">

Separate Schriftarten mit mehreren linkElementen:

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

2

Ich weiß, dass dies ein älterer Beitrag ist, aber weiß jemand, ob das Trennen von <link>Tags einen Leistungsvorteil (Nachteil) hat ? Komprimiert Google, wenn mehrere Schriftarten in einem Aufruf enthalten sind?

— Patrick Moore

@PatrickMoore 2 Dinge: a) die Upload- / Antwortgeschwindigkeit Ihres Servers im Vergleich zur Downloadgeschwindigkeit Ihres Endbenutzers b) Zeit zum Erstellen einer weiteren Verbindung (Antwortzeit des Servers im Vergleich zur Antwortzeit des Endbenutzers), theoretisch, wenn Sie 2 "schwere" Schriftarten laden Wenn Ihre Seite ansonsten schnell geladen wird, kann das separate Laden (parallel) zu einem schnelleren Laden führen. Aber es kommt wirklich auf a) & b) an

— jave.web

7

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

Sie müssen das Zeichen | ersetzen durch sein entsprechendes UTF-8-Zeichen, das gibt

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

— Schoßmund
quelle

-3

Mein Fall war ein verrückter Zeilenumbruch. Bitte beachten Sie das beigefügte Bild.

— Nun, Smith
quelle

-4

Ich scape & mit " & amp; " und funktioniert gut, Beispiel:

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

1

Diese Frage ist über |Charakter, nicht &;-)

— jave.web