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

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