web-dev-qa-db-ja.com

GoogleフォントURLがw3.orgのHTML5検証を破る

このHTMLタグを使用して、異なるサイズの3つのフォントをロードします。

<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週間前までは、これはHTML5の w3.orgバリデーター でサポートされていました。今、このエラーが発生します：

 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が今気に入らないものは何ですか？

html5w3c-validationgoogle-font-api
173
Octavian

href属性（|）で%7C（パイプ文字）をURLエンコードします。

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

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

この検証の問題を修正するには、2つの方法があります。

  1. href要素のlink属性で|（垂直バー/行）文字を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">

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