Google Fonts URL нарушает проверку 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
Это проблема с сгенерированным Google URL или проблема с валидатором w3? Действительно ли какая-либо спецификация требует, чтобы символ канала кодировался в атрибуте HTML?
Микко Ранталайнен,
2
@MikkoRantalainen, RFC 1738 отмечает, что символ канала небезопасен: другие символы небезопасны, поскольку известно, что шлюзы и другие транспортные агенты иногда изменяют такие символы. Это символы "{", "}", "|", "\", "^", "~", "[", "]" и "` ".
Steveax
2
Я ожидаю, что сырой UTF-8 будет действительным в кодировке UTF-8 HTML без кодирования других символов, кроме тех, которые используются для HTML, например &, "и '. И эти специальные символы должны быть закодированы правилами HTML (например, и &ampт. Д.). Затем ожидается, что пользовательский агент будет следовать RFC 3987 и преобразовывать IRI в кодированный в процентах UTF-8, прежде чем отправлять его по HTTP ( tools.ietf.org/html/rfc3987 ).
Микко Ранталайнен,
10

Есть 2 способа решить эту проблему проверки:

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

  2. Раздельное включение шрифтов с несколькими 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
источник
2
Я знаю, что это старый пост, но кто-нибудь знает, есть ли какое-то преимущество в производительности (разделении) для разделения <link>тегов? Сжимает ли Google несколько шрифтов в одном вызове?
Патрик Мур
@PatrickMoore 2 вещи: а) скорость загрузки / отклика вашего сервера в зависимости от скорости загрузки конечного пользователя; б) время создания другого соединения (время отклика сервера в зависимости от времени отклика конечного пользователя), теоретически, если вы загружаете 2 «тяжелых» шрифта в противном случае ваша страница загружается быстро, загрузка их по отдельности (параллельным способом) может привести к более быстрой загрузке. Но это действительно зависит от а) и б)
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"
lapouth
источник
-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