Google fontları URL sonu w5.org'da HTML5 Doğrulaması

187

Bu HTML etiketini kullanarak farklı boyutlarda 3 yazı tipi yüklüyorum:

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

~ 1/2 hafta öncesine kadar bu HTML5 için w3.org doğrulayıcısı tarafından desteklendi ; şimdi bu hatayı veriyor:

 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.

W3C Markup Validator'ın şimdi beğenmediği şeyler nelerdir?

html w3c-validation google-font-api

— Octavian
kaynak

346

URL kodlamak |içinde (boru karakter) href(öznitelik %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
kaynak

1

Bu, Google tarafından oluşturulan URL ile ilgili bir sorun mu yoksa w3 doğrulayıcıyla ilgili bir sorun mu? Herhangi bir spesifikasyon aslında HTML özelliğinde kodlanmış karakter gerektiriyor mu?

— Mikko Rantalainen

2

@MikkoRantalainen, RFC 1738 dikey çizgi karakterinin güvensiz olduğunu not eder: Ağ geçitleri ve diğer taşıma aracılarının bazen bu karakterleri değiştirdiği bilinen diğer karakterler güvenli değildir. Bu karakterler "{", "}", "|", "\", "^", "~", "[", "]" ve "` ".

— steveax

2

Ben diğer karakterleri kodlama olmadan ham UTF-8, UTF-8 kodlanmış HTML içinde geçerli olması beklenir ancak bu HTML örneğin kullanılır &, "ve '. Ve bu özel karakterlerin HTML kuralları (örneğin, &ampvb.) İle kodlanması gerekir . Kullanıcı aracısının daha sonra HTTP üzerinden göndermeden önce RFC 3987'yi izlemesi ve IRI'yi kodlanmış yüzde UTF-8'e dönüştürmesi beklenir ( tools.ietf.org/html/rfc3987 ).

— Mikko Rantalainen

10

Bu doğrulama sorununu çözmenin 2 yolu vardır:

URL , öğenin (as ) |özelliğindeki (dikey çubuk / satır) karakterini kodlar :hreflink%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">

Yazı tiplerini birden çok öğeyle ayırın link:

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

2

Bu eski yazı olduğunu biliyorum, ama kimse <link>etiketleri ayırmak için herhangi bir performans (dis) avantajı olup olmadığını biliyor mu? Bir aramada birden fazla yazı tipi varsa Google sıkıştırır mı?

— Patrick Moore

@PatrickMoore 2 şey: a) teorik olarak, 2 "ağır" yazı tipi yüklüyorsanız , sunucu yükleme / yanıt hızınız ile son kullanıcı indirme hızınız vs b) başka bir bağlantı oluşturma süresi (sunucu yanıt süresi ile son kullanıcı yanıt süresi) sayfanız başka şekilde hızlı yükleniyor, ayrı olarak (paralel bir şekilde) yüklenmesi daha hızlı yüklenmeye neden olabilir. Ama gerçekten a) & b) bağlıdır

— jave.web

7

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

Karakteri değiştirmelisiniz | karşılık gelen UTF-8 karakteri ile

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

— lapouth
kaynak

-3

Benim durumum çılgın çizgi kırılma karakteriydi. Lütfen ekteki resme bakın.

— Şey Smith
kaynak

-4

Ben & " & amp; " ile scape ve iyi çalışıyor, örnek:

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

1

Bu soru |karakter hakkında değil &;-)

— jave.web