Google fonts URL break HTML5 Validasi di w3.org

187

Saya memuat 3 font dalam berbagai ukuran menggunakan tag HTML ini:

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

Hingga ~ 1/2 minggu yang lalu ini didukung oleh validator w3.org untuk HTML5; sekarang ini memberikan kesalahan ini:

 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.

Hal-hal apa yang tidak disukai W3C Markup Validator sekarang?

html w3c-validation google-font-api Oktavianus
sumber

Jawaban:

346

URL menyandikan |(karakter pipa) dalam hrefatribut ( %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
sumber
1
Apakah ini masalah dengan URL yang dihasilkan Google atau masalah dengan validator w3? Apakah ada spesifikasi yang benar-benar membutuhkan karakter pipa untuk dikodekan dalam atribut HTML?
Mikko Rantalainen
2
@MikkoRantalainen, RFC 1738 mencatat bahwa karakter pipa tidak aman: Karakter lain tidak aman karena gateway dan agen transportasi lain diketahui kadang-kadang memodifikasi karakter tersebut. Karakter-karakter ini adalah "{", "}", "|", "\", "^", "~", "[", "]", dan "` ".
steveax
2
Saya berharap UTF-8 mentah valid dalam UTF-8 HTML yang dikodekan tanpa pengkodean karakter lain tetapi yang digunakan untuk HTML misalnya &, "dan '. Dan karakter khusus itu perlu dikodekan oleh aturan HTML (mis. &ampDll). Agen pengguna kemudian diharapkan untuk mengikuti RFC 3987 dan mengonversi IRI ke persen UTF-8 yang disandikan sebelum mengirimkannya melalui HTTP ( tools.ietf.org/html/rfc3987 ).
Mikko Rantalainen
10

Ada 2 cara untuk memperbaiki masalah validasi ini:

  1. URL menyandikan karakter |(bilah / garis vertikal) dalam hrefatribut linkelemen (sebagai %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. Pisahkan penyertaan font dengan beberapa linkelemen:

    <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">
dippa
sumber
2
Saya tahu ini adalah posting yang lebih lama, tetapi apakah ada yang tahu jika ada kinerja (dis) keuntungan untuk memisahkan <link>tag? Apakah Google memampatkan jika banyak font dalam satu panggilan?
Patrick Moore
@PatrickMoore 2 hal: a) kecepatan unggah / respons server vs kecepatan unduhan pengguna akhir Anda b) waktu untuk membuat koneksi lain (waktu respons server vs waktu respons pengguna akhir), secara teoritis, jika Anda memuat 2 font "berat" dan halaman Anda memuat dengan cepat, memuatnya secara terpisah (secara paralel) dapat menghasilkan pemuatan yang lebih cepat. Tapi itu benar-benar tergantung pada a) & b)
jave.web
7

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

Anda harus mengganti karakter | oleh karakter UTF-8 yang sesuai, yang memberi

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

Kasus saya adalah karakter baris gila. Silakan lihat gambar terlampir.masukkan deskripsi gambar di sini

Baiklah Smith
sumber
-4

Saya mencetak & dengan " & amp; " dan berfungsi dengan baik, contoh:

<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
sumber
1
Pertanyaan ini adalah tentang |karakter, bukan &;-)
jave.web