在 1 个请求中加载多个 Google 字体违反了 HTML 标准

Loading multiple Google Fonts in 1 request violates HTML standards

Google Fonts documentation中建议加载多个Google字体可以通过管道字符(|)来完成,例如:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700|Amaranth:400italic" />

HTML validator表示:

Bad value http://fonts.googleapis.com/css?family=PT+Sans:400,700|Amaranth:400italic for attribute href on element link: Illegal character in query: | is not allowed.

我应该信任哪个网站?当然我可以像下面这样在两个请求中分离两种字体,但是加载时间会加倍。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amaranth:400italic" />

p.s。 DOCTYPE 是 HTML5.

已更新:重新措辞以正确传达立场与预期的细微差别(之前的措辞可能将我的立场曲解为 "never use validators",而事实上,我的意图是 "choose browser behavior over validators in the event of disagreement")。

在这种特殊情况下,验证器是正确的; '|'符号需要进行百分比编码。但是,您应该记住,验证器并不完美,其中许多在处理过程中过于严格; 真正重要的网站在您的用户使用的浏览器中的加载方式,而不是特定验证器的想法。如果验证器与浏览器中的实验结果不一致,则从网站开发的角度来看,浏览器始终 "correct"(与 W3C 标准中捕获的内容相比可能不正确,但是 "the web platform" 是由典型浏览器行为引起的事实上的 "standards" 决定的......W3C 和其他标准委员会通常远远落后于浏览器的变化,并且只是在很久之后才完全正式地标准化网络平台的各个方面它已经被广泛采用)。

正如@slideshowbarker 在下面的评论中指出的那样,验证器和 linter 可以在开发过程中有助于在开发早期发现错误(这一点我同意)。但是,您应该注意 validators are just a tool(并不总是正确的,有时甚至过于嘈杂);重要的是不要浪费大量时间让验证器对浏览器完全接受的代码感到满意。而且您当然不应该在您的网站上乱扔验证 icons/buttons,这只会让访问该网站并且不知道或不关心 HTML.

细节的用户感到困惑

因为浏览器而非验证器才是判断页面是否正常运行的真正 "source of truth",除了其中一些其他验证器工具之外,您可能希望将 WebDriver 测试添加到您的工具库。 WebDriver 允许您创建集成测试,在各种不同的浏览器中呈现您的网站,这使您能够以比独立验证器更准确的方式模拟和验证您的网站在各种浏览器中的行为。因此,您的 WebDriver 测试执行的检查也可能比验证器提出的错误更重要/噪音更小/更不可忽视(有时他们的投诉可能过于严格)。

正如@BoltClock 所建议的那样,将管道字符转义为 %7C 是最佳选择。

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700%7CAmaranth:400italic" />

两种字体均已正确加载,并通过上述 link 的网络响应进行了验证。