Google font URL break HTML5 Convalida su w3.org

187

Carico 3 caratteri di dimensioni diverse utilizzando questo tag 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">

Fino a ~ 1/2 settimane fa questo era supportato dal validatore w3.org per HTML5; ora dà questo errore:

 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.

Che cosa non piace al W3C Markup Validator adesso?

html w3c-validation google-font-api

— Ottaviano
fonte

346

L'URL codifica i |(caratteri pipe) hrefnell'attributo ( %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
fonte

1

È un problema con l'URL generato da Google o un problema con il validatore w3? Qualche specifica richiede effettivamente che il carattere pipe sia codificato nell'attributo HTML?

— Mikko Rantalainen,

2

@MikkoRantalainen, RFC 1738 nota che il carattere pipe non è sicuro: altri caratteri non sono sicuri perché i gateway e altri agenti di trasporto sono noti a volte modificare tali caratteri. Questi caratteri sono "{", "}", "|", "\", "^", "~", "[", "]" e "` ".

— Steveax,

2

Mi aspetterei che UTF-8 grezzo sia valido in HTML codificato UTF-8 senza codificare altri caratteri ma quelli utilizzati per HTML &, ad esempio , "e '. E quei caratteri speciali dovrebbero essere codificati da regole HTML (ad es. &ampEcc.). L'agente utente dovrebbe quindi seguire RFC 3987 e convertire l'IRI in UTF-8 con codifica percentuale prima di inviarlo su HTTP ( tools.ietf.org/html/rfc3987 ).

— Mikko Rantalainen,

10

Esistono 2 modi per risolvere questo problema di convalida:

L'URL codifica il carattere |(barra / linea verticale) hrefnell'attributo linkdell'elemento (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">

Separazione dei caratteri separata con più linkelementi:

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

2

So che questo è un post precedente, ma qualcuno sa se c'è qualche vantaggio in termini di prestazioni nel separare i <link>tag? Google comprime se più caratteri sono presenti in una chiamata?

— Patrick Moore,

@PatrickMoore 2 cose: a) velocità di upload / risposta del server rispetto alla velocità di download dell'utente finale b) tempo per creare un'altra connessione (tempo di risposta del server vs tempo di risposta dell'utente finale), teoricamente, se si caricano 2 caratteri "pesanti" e altrimenti la tua pagina si sta caricando velocemente, caricandola separatamente (in modo parallelo) si potrebbe ottenere un caricamento più veloce. Ma dipende davvero da a) & b)

— jave.web il

7

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

Devi sostituire il carattere | dal suo corrispondente carattere UTF-8, che dà

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

— lapouth
fonte

-3

Il mio caso è stato un folle personaggio di rottura di linea. Si prega di vedere l'immagine allegata.

— Bene Smith
fonte

-4

Scape & con " & amp; " e funziona benissimo, ad esempio:

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

1

Questa domanda riguarda il |personaggio, non &;-)

— jave.web il