Розрив URL-адреси шрифтів Google HTML5 Перевірка HTML5 на w3.org

187

Я завантажую 3 шрифти різних розмірів за допомогою цього тегу 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">

До ~ 1/2 тижнів тому це було підтримано валідатором w3.org для HTML5; тепер він дає цю помилку:

 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 зараз не люблять?

html w3c-validation google-font-api

— Октавіан
джерело

346

URL кодує |(символи труби) в hrefатрибуті ( %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
джерело

1

Це проблема з URL-адресою, створеною Google або проблема з валідатором w3? Чи потрібна будь-яка специфікація, яка насправді потребує кодування коду в атрибуті HTML?

— Mikko Rantalainen

2

@MikkoRantalainen, RFC 1738 зазначає, що характер труби небезпечний: інші символи небезпечні, оскільки шлюзи та інші транспортні агенти іноді змінюють такі символи. Це символи "{", "}", "|", "\", "^", "~", "[", "]" і "` ".

— steveax

2

Я б очікував, що сирий UTF-8 буде дійсним у кодованому HTML UTF-8 без кодування інших символів, окрім тих, що використовуються для HTML, наприклад &, "та '. І ці спеціальні символи повинні бути закодовані правилами HTML (наприклад, &ampтощо). Очікується, що користувальницький агент буде слідувати RFC 3987 і перетворювати IRI у відсотково закодований UTF-8 перед подачею через HTTP ( tools.ietf.org/html/rfc3987 ).

— Мікко Ранталайнен

10

Є два способи виправити цю проблему перевірки:

URL кодує |символ (вертикальний рядок / рядок) в hrefатрибуті linkелемента (як %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">

Окреме включення шрифтів з декількома 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">

— діппас
джерело

2

Я знаю, що це старіші публікації, але хтось знає, чи є якась перевага для продуктивності розділення <link>тегів? Чи стискає Google, якщо в одному дзвінку є кілька шрифтів?

— Патрік Мур

@PatrickMoore 2 речі: а) швидкість завантаження / відповіді вашого сервера та швидкість завантаження кінцевого користувача; б) час створення іншого підключення (час відповіді сервера проти часу відповіді кінцевого користувача), теоретично, якщо ви завантажуєте 2 "важких" шрифти а Ваша сторінка в іншому випадку завантажується швидко, завантаження їх окремо (паралельно) може призвести до швидшого завантаження. Але це дійсно залежить від а) & b)

— jave.web

7

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

Ви повинні замінити символ | за відповідним символом UTF-8, який дає

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

— лапут
джерело

-3

У моєму випадку був божевільний характер розриву лінії. Перегляньте додане зображення.

— Ну Сміт
джерело

-4

Я вусиків і з « & амп; » і працює відмінно, приклад:

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css' />

— Оскар Телло
джерело

1

Це питання стосується |характеру, а не &;-)

— jave.web