谷歌字体的URL在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">

在大约半个星期前，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标记语言验证器现在不喜欢什么？

- Octavian

Answer 1

将 href 属性中的 |（管道字符）进行 URL 编码 (%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

---

这是由Google生成的URL引起的问题还是w3验证器的问题？是否有任何规范实际要求在HTML属性中编码管道字符？ - Mikko Rantalainen

@MikkoRantalainen，《RFC 1738》指出，竖线字符不安全：其他字符也不安全，因为网关和其他传输代理程序有时会修改这些字符。这些字符是“{”，“}”，“|”，“\”，“^”，“~”，“[”，“]”和“`”。 - steveax

我期望在UTF-8编码的HTML中，原始的UTF-8字符应该是有效的，而不需要对除了用于HTML的字符（如&、"和'）之外的其他字符进行编码。那些特殊字符需要按照HTML规则进行编码（例如&amp等）。然后，用户代理应该遵循RFC 3987，并在通过HTTP提交之前将IRI转换为百分比编码的UTF-8。 (https://tools.ietf.org/html/rfc3987) - Mikko Rantalainen

有趣的是，我的Google字体链接到Open Sans并没有包含管道符，而是在“Open”和“Sans”之间留了一个空格。将空格替换为“+”对我来说解决了这个问题。 - Marius Hofert

Answer 2

这个验证问题有两种解决方式：

1. 对于 link 元素中的 href 属性，需要对竖线字符 | 进行 URL 编码，使用 %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">

- user2757283

---

我知道这是一篇较旧的帖子，但是否有人知道将<link>标签分开是否会有任何性能（不）优势？如果多个字体在一个调用中，Google是否会进行压缩？ - Patrick Moore

@PatrickMoore 两件事情：a) 你的服务器上传/响应速度与终端用户下载速度 b) 创建另一个连接所需的时间（服务器响应时间与终端用户响应时间），理论上，如果你正在加载2个“重”字体并且页面其他部分加载速度很快，将它们分别加载（以并行方式）可能会导致更快的加载。但这确实取决于a)和b)。 - jave.web

Answer 3

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"

- lapouth

Answer 4

我的情况是疯狂的换行符。请查看附图。

- Well Smith

Answer 5

我使用&来转义"& amp;"，它可以正常工作，例如：

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

- Oscar Tello

---

这个问题是关于 | 字符，而不是 & 的。;-) - jave.web