URL-адрес шрифта Google для HTML5 Validation на w3.org

Я загружаю 3 шрифта разных размеров, используя этот тег HTML:

<link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic|PT+Serif:400,400italic|Bree+Serif'; return false;">

До 1/2 недели назад это поддерживалось w3.org validator для 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 не нравится сейчас?

ОТВЕТЫ

Ответ 1

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

Ответ 2

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

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

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

Ответ 4

Я выделяю и с помощью & "и отлично работает, например:

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