Google phông chữ URL phá vỡ Xác thực HTML5 trên w3.org

187

Tôi tải 3 phông chữ ở các kích cỡ khác nhau bằng thẻ HTML này:

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

Đến khoảng 1/2 tuần trước, điều này đã được hỗ trợ bởi trình xác nhận w3.org cho HTML5; bây giờ nó báo lỗi này:

 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.

Bây giờ những điều mà Trình xác thực đánh dấu W3C không thích là gì?

html w3c-validation google-font-api

— Octavian
nguồn

346

URL mã hóa |(ký tự ống) trong hrefthuộc tính ( %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
nguồn

1

Đây có phải là sự cố với URL do Google tạo hoặc sự cố với trình xác thực w3 không? Có bất kỳ thông số thực sự yêu cầu ký tự ống được mã hóa trong thuộc tính HTML không?

— Mikko Rantalainen

2

@MikkoRantalainen, RFC 1738 lưu ý rằng ký tự ống không an toàn: Các ký tự khác không an toàn vì các cổng và các tác nhân vận chuyển khác đôi khi được biết là sửa đổi các ký tự đó. Các ký tự này là "{", "}", "|", "\", "^", "~", "[", "]" và "` ".

— steveax

2

Tôi mong chờ liệu UTF-8 mới có giá trị trong UTF-8 mã hóa HTML mà không cần mã hóa ký tự khác nhưng những người sử dụng cho HTML ví dụ &, "và '. Và những ký tự đặc biệt đó sẽ cần được mã hóa theo quy tắc HTML (ví dụ: &ampv.v.). Tác nhân người dùng sau đó dự kiến sẽ theo RFC 3987 và chuyển đổi IRI thành phần trăm được mã hóa UTF-8 trước khi gửi nó qua HTTP ( tools.ietf.org/html/rfc3987 ).

— Mikko Rantalainen

10

Có 2 cách để khắc phục sự cố xác thực này:

URL mã hóa ký tự |(thanh dọc / dòng) trong hrefthuộc tính của linkphần tử (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">

Bao gồm các phông chữ riêng biệt với nhiều linkyếu tố:

<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
nguồn

2

Tôi biết đây là bài viết cũ hơn, nhưng có ai biết nếu có bất kỳ lợi thế hiệu suất (dis) nào để tách <link>các thẻ không? Google có nén nếu nhiều phông chữ trong một cuộc gọi không?

— Patrick Moore

@PatrickMoore 2 điều: a) tốc độ tải lên / phản hồi của máy chủ so với tốc độ tải xuống của người dùng cuối b) thời gian để tạo một kết nối khác (thời gian phản hồi của máy chủ so với thời gian phản hồi của người dùng cuối), theo lý thuyết, nếu bạn đang tải 2 phông chữ "nặng" và trang của bạn đang tải nhanh, tải chúng riêng rẽ (theo cách song song) có thể dẫn đến tải nhanh hơn. Nhưng nó thực sự phụ thuộc vào a) & b)

— jave.web

7

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

Bạn phải thay thế nhân vật | bởi ký tự UTF-8 tương ứng của nó, cung cấp cho

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

— lapouth
nguồn

-3

Trường hợp của tôi là nhân vật phá vỡ dòng điên. Xin vui lòng xem hình ảnh đính kèm.

— Vâng Smith
nguồn

-4

Tôi scape & với " & amp; " và hoạt động tốt, ví dụ:

<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
nguồn

1

Câu hỏi này là về |nhân vật, không phải &;-)

— jave.web