Html Google 字体 URL 中断了 w3.org 上的 HTML5 验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22466913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google fonts URL break HTML5 Validation on w3.org
提问by Octavian
I load 3 fonts in different sizes using this HTML tag:
我使用这个 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">
Till ~1/2 weeks ago this was supported by w3.org validatorfor HTML5; now it gives this error:
直到大约 1/2 周前，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.
What's the things the W3C Markup Validator does not like now?
W3C 标记验证器现在不喜欢什么？
回答by steveax
URL encode the |(pipe characters) in the hrefattribute (%7C):
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">
回答by Octavian
There are 2 ways to fix this validation problem:
有两种方法可以解决此验证问题：
URL encode the
|(vertical bar/line) character in thehrefattribute of thelinkelement (as%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">Separate fonts inclusion with multiple
linkelements :<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">
URL 编码元素属性中的
|（垂直条/线）字符(as ) ：hreflink%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">
回答by lapouth
You must replace the character | by its corresponding UTF-8 character, which gives
您必须替换字符 | 通过其相应的 UTF-8 字符，它给出
href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&effect=shadow-multiple"
回答by Well Smith
My case was crazy line break character. Please see the attached image.
我的情况是疯狂的换行符。请参阅所附图片。
回答by Oscar Tello
I scape &with "& amp;" and works fine, example:
我用“ & amp;”转义&并且工作正常，例如：
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
