GoogleフォントのURLがw3.orgでのHTML5検証に違反する

187

この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マークアップバリデーターが今、気に入らない点は何ですか？

html w3c-validation google-font-api

— オクタヴィアン
ソース

346

|（パイプ文字）を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">

— Steveax
ソース

1

これはGoogleが生成したURLの問題ですか、それともw3バリデーターの問題ですか？実際には、HTML属性でエンコードするためにパイプ文字が必要な仕様はありますか？

— ミッコランタライネン2017

2

@ MikkoRantalainen、RFC 1738では、パイプ文字は安全ではないことが指摘されています。ゲートウェイや他のトランスポートエージェントがそのような文字を変更することが知られているため、他の文字は安全ではありません。これらの文字は、「{」、「}」、「|」、「\」、「^」、「〜」、「[」、「]」、および「 `」です。

— steveax 2017年

2

私は生のUTF-8は、他の文字をエンコードすることなく、UTF-8エンコードされたHTMLに有効であると期待していますが、HTMLなどのために使用されるものだろう&、 "と'。そして、それらの特殊文字はHTMLルール（例：&ampなど）でエンコードする必要があります。ユーザーエージェントは、RFC 3987に準拠し、HTTP経由で送信する前にIRIをパーセントエンコードUTF-8に変換することが期待されます（tools.ietf.org/html/rfc3987）。

— Mikko Rantalainen 2017年

10

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

要素|のhref属性の（垂直バー/ライン）文字を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">

複数の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">

— ディパス
ソース

2

私はこれが古い投稿であることを知っていますが、<link>タグを分離することのパフォーマンスに不利な点があるかどうか誰かが知っていますか？複数のフォントが1回の呼び出しである場合、Googleは圧縮しますか？

— Patrick Moore

@PatrickMoore 2つのこと：a）サーバーのアップロード/応答速度とエンドユーザーのダウンロード速度b）別の接続を作成する時間（サーバーの応答時間とエンドユーザーの応答時間）、理論的には、2つの「重い」フォントをロードしている場合それ以外の場合はページの読み込みが速く、それらを個別に（並行して）読み込むと、読み込みが速くなる可能性があります。しかし、それは本当にa）とb）に依存します

— jave.web '25

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

私はスケープ＆「と＆＃038;」と罰金、例を動作します。

<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