HTML 验证产生错误答案

【问题标题】：HTML validation generates errorHTML 验证产生错误
【发布时间】：2015-06-09 03:29:47
【问题描述】：

我正在使用谷歌字体，它会为以下链接生成以下错误

<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />

错误信息

第 35 行，第 289 列：元素 link 上属性 href 的值错误：查询中的非法字符：不是 URL 代码点。
…if|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />
网址语法：任何网址。例如：/hello、#canvas 或 http://example.org/。字符应在 NFC 中表示，空格应转义为 %20。

示例 HTML

<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans')" rel="stylesheet" />
</head>
<body>
</body>
</html>

更新

这会产生错误

 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed|Source%20Sans%20Pro" />

这可行

 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato"  />

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed" />

当我添加| 来添加多种字体时会产生错误，所以我应该使用多个<link> 标签来添加字体还是？

对此感到困惑的是，以下链接是由网站上使用的 Google 字体生成的

https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans|Roboto:400,700,400italic|Roboto+Condensed:400,300|Lato

【问题讨论】：

标签： html css w3c-validation html-validation

【解决方案1】：

您使用 JAVASCRIPT NOTATION 的示例代码 LINK 和 IMPORT 可能无助于消除 VALIDATION 错误 - 所以请尝试使用 JAVASCRIPT 表示法，它可以正常工作而不会出现任何错误。

<!DOCTYPE html>
<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
<script type="text/javascript">
WebFontConfig = {google: { families: [ Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans ] }};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>
</head>
<body>
</body>
</html>

您需要将&amp; 符号替换为&amp;

<!DOCTYPE html>
<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>

您可以使用 JAVASCRIPT 表示法来包含来自 google 的字体

<!DOCTYPE html>
<html>
<head>

    <title>Title</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::cyrillic-ext,latin,greek-ext,greek,vietnamese,latin-ext,cyrillic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>
</head>
<body>
</body>
</html>

更多建议

始终在 HTML 页面顶部包含文档类型
尝试使用 IMPORT 和 JAVASCRIPT 替代方法来包含字体。
请使用您自己的 google 字体 - 为了避免拼写错误，我尝试使用 google 的新字体。

【讨论】：

如何添加多种字体？
我已经更新了答案 - 请检查答案的第一部分。使用 javascript 表示法，它不会给出任何错误。
@Learning 不需要这些。它所做的只是使用 javascript 以不同的方式为您提供您想要的东西，而不是修复您拥有的东西。如果 js 以某种方式失败会发生什么？不要这样做。

【解决方案2】：

query component 中的字符 | 是 not allowed（也不是 URI 中的任何其他位置）。它必须使用%7C 进行百分比编码。

所以

http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic|Montserrat:700|Merriweather:400italic|Roboto+Condensed|Source+Sans+Pro|Droid+Serif|Open+Sans+Condensed|Oswald|Molengo|PT+Sans|Droid+Sans')

应该是这个 URI

http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic%7CMontserrat:700%7CMerriweather:400italic%7CRoboto+Condensed%7CSource+Sans+Pro%7CDroid+Serif%7COpen+Sans+Condensed%7COswald%7CMolengo%7CPT+Sans%7CDroid+Sans')

【讨论】：

【解决方案3】：

字符串末尾附近有一个空格

PT Sans|Droid Sans')"

应该转义为：

PT%20Sans|Droid%20Sans')"

【讨论】：

将其更改为` fonts.googleapis.com/…)" />` 会产生同样的错误
你可以在第一个错误旁边添加新错误作为屏幕截图吗？