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周前，HTML3的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

— 屋大维
source

346

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

— Steveax
source

1

这是Google生成的URL问题还是w3验证程序问题？是否有任何规范实际上要求将管道字符编码为HTML属性？

— Mikko Rantalainen

2

@ MikkoRantalainen，RFC 1738指出管道字符是不安全的：其他字符是不安全的，因为已知网关和其他传输代理有时会修改此类字符。这些字符是“ {”，“}”，“ |”，“ \”，“ ^”，“〜”，“ [”，“]”和“`”。

— steveax

2

我希望生UTF-8使用UTF-8编码的HTML有效编码没有其他字符，但那些用于HTML如&， "和'。并且那些特殊字符将需要通过HTML规则（例如&amp等）进行编码。然后，期望用户代理遵循RFC 3987，并将IRI转换为百分比编码的UTF-8，然后再通过HTTP（tools.ietf.org/html/rfc3987）提交。

— Mikko Rantalainen

10

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

URL 在元素|的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">

包含多个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">

— pa
source

2

我知道这是较老的帖子，但是有人知道分离<link>标签是否有任何性能（劣势）？如果一次通话中包含多种字体，Google是否会压缩？

— Patrick Moore

@PatrickMoore 2件事：a）服务器上载/响应速度与最终用户下载速度b）创建另一个连接的时间（服务器响应时间与最终用户响应时间），理论上，如果要加载2种“大量”字体否则您的页面加载速度很快，因此（以并行方式）分别加载它们可能会导致加载速度更快。但这确实取决于a）和b）

— jave.web，2016年

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"

— 笔记本电脑
source

-3

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

— 史密斯
source

-4

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

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

— 奥斯卡·特洛
source

1

这个问题是关于|性格的，而不是&;-)

— jave.web，2016年