Google字体网址在w3.org上打破HTML5验证

Question

我使用此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">

Till~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 Markup Validator现在不喜欢什么？

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

Answer 2

http://www.utf8-chartable.de/

您必须替换字符| 通过其相应的UTF-8字符给出

href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&effect=shadow-multiple"

Answer 3

有两种方法可以解决此验证问题:

1. URL编码元素属性中的|(垂直条/线)字符(as ):hreflink%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">