Google шрифты URL перерыв HTML5 проверка на w3.org


я загружаю 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?

5 157

5 ответов:

URL кодирует | (символы канала) в (%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">

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"

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

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

мой случай был сумасшедшим символом разрыва строки. Пожалуйста, смотрите прилагаемое изображение.enter image description here

I scape & С "& amp; " и отлично работает, например:

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