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周前，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标记验证器现在不喜欢的东西是什么？

62327 次浏览
小开
最佳答案

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

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

我用“&；amp； ”替换&；，工作正常，例如：

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

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

  1. URL对__abc2元素的__abc1属性中的__abc0（垂直条/线）字符进行编码（作为__abc3）：

    <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. Separate fonts inclusion with multiple link elements :

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

我的情况是疯狂的换行字符。请看附件中的图片。enter image description here


提交答案