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

直到大约1/2周之前，w3.org validator支持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

网址对|属性（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. 网址对|元素的href属性中的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">
   

Answer 4

我的情况是疯狂的换行符。请参阅附图。

Answer 5

我用“＆amp; amp; ”代替＆amp; 并且工作正常，例如：

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