HTML验证会产生错误
[英]HTML validation generates error
问题描述
I am using google fonts and it generates following error for below link 
我正在使用谷歌字体，它为以下链接生成以下错误
<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" />
ERROR MESSAGE 错误信息
Line 35, Column 289: Bad value for attribute
hrefon elementlink: Illegal character in query: not a URL code point.link上的href属性值错误：查询中的非法字符：不是URL代码点。…if|Open+Sans+Condensed|Oswald|Molengo|PT Sans|Droid Sans')" rel="stylesheet" />Syntax of URL: Any URL.
SAMPLE HTML 范例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>
UPDATE 更新
This generates error 这会产生错误
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed|Source%20Sans%20Pro" />
This Works 这个作品
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto%20Condensed" />
When i add | 当我添加| to add multiple fonts it generates error so should i use multiple <link> tag to add fonts or ? 添加多种字体会产生错误，所以我应该使用多个<link>标记添加字体还是？
Confused about this is as below links is generate by on Google fonts font use on website 对此感到困惑的是，如下链接是由Google字体在网站上使用字体生成的
https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans|Roboto:400,700,400italic|Roboto+Condensed:400,300|Lato
3 个解决方案
解决方案1
5 已采纳 2015-06-09 03:57:40
Your example code working with JAVASCRIPT NOTATION LINK and IMPORT may not help to eliminate the VALIDATION error - so please try with JAVASCRIPT notation it works well without any error. 您的使用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>
You will need to substiture & sign with & 您需要使用&进行替换&签名
<!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&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>
You may please use JAVASCRIPT notation for including the fonts from google 您可能需要使用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>
Few more suggestions 很少有其他建议
- Always include doctype at the top of HTML page 始终在HTML页面顶部添加doctype
- Try the IMPORT and JAVASCRIPT alternatives to include the fonts. 尝试使用IMPORT和JAVASCRIPT替代方法来包括字体。
- Please use your own google font - to avoid typos I tried with new fonts from google. 请使用您自己的Google字体-避免我尝试使用Google的新字体输入错误。
解决方案2
3 2015-06-09 12:44:20
The character | 人物| is not allowed in the query component (nor anywhere else in a URI). 在查询组件中 （ 不允许在URI中的任何其他位置）被禁止 。 It would have to be percent-encoded with %7C . 它必须使用%7C进行百分比编码。
So 所以
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')
should be this URI instead 应该是这个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
1 2015-06-09 03:33:15
There is a space in the string near the end 字符串末尾有一个空格
PT Sans|Droid Sans')"
should be escaped as: 应该转义为：
PT%20Sans|Droid%20Sans')"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.