w3.org에서 Google 글꼴 URL이 HTML5 유효성 검사를 중단 함

187

이 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">

~ 1 / 2 주 전까지는 HTML3 용 w3.org 유효성 검사기 에서 지원되었습니다 . 이제이 오류가 발생합니다 :

 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 Markup Validator가 현재 싫어하는 것은 무엇입니까?

html w3c-validation google-font-api

— 로마 황제 옥타비우스
소스

346

속성 ( ) |에서 (파이프 문자)를 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">

— 스티브 락스
소스

1

Google에서 생성 한 URL 또는 w3 유효성 검사기 문제입니까? 실제로 스펙에서 파이프 문자를 HTML 속성으로 인코딩해야합니까?

— Mikko Rantalainen

2

@MikkoRantalainen, RFC 1738 은 파이프 문자가 안전하지 않다고 언급합니다. 게이트웨이 및 기타 전송 에이전트가 때때로 이러한 문자를 수정하는 것으로 알려져 있기 때문에 다른 문자는 안전하지 않습니다. 이러한 문자는 "{", "}", "|", "\", "^", "~", "[", "]"및 "`"입니다.

— steveax

2

나는 다른 문자를 인코딩없이 원시 UTF-8 UTF-8 인코딩 된 HTML에서 유효한 것으로 기대하지만, 사람들은 HTML 예를 들어, 사용 &, "및 '. 그리고 이러한 특수 문자는 HTML 규칙 (예 : &amp등) 으로 인코딩해야합니다 . 그런 다음 사용자 에이전트는 RFC 3987을 따르고 HTTP를 통해 제출하기 전에 IRI를 퍼센트 인코딩 된 UTF-8로 변환해야합니다 ( tools.ietf.org/html/rfc3987 ).

— Mikko Rantalainen

10

이 유효성 검사 문제를 해결하는 방법에는 두 가지가 있습니다.

요소 |의 href속성 에서 (수직 막대 / 줄) 문자를 URL로 인코딩합니다 ( ) :link%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">

— 디 파스
소스

2

나는 이것이 오래된 게시물이라는 것을 알고 있지만 <link>태그 를 분리하는 데 성능 (단점)이 있는지 아는 사람이 있습니까? 한 번의 호출로 여러 글꼴이있는 경우 Google이 압축합니까?

— Patrick Moore

@PatrickMoore 2 가지 사항 : a) 서버 업로드 / 응답 속도 대 최종 사용자 다운로드 속도 b) 이론적으로 2 개의 "무거운"글꼴을로드하는 경우 다른 연결을 만드는 시간 (서버 응답 시간 대 최종 사용자 응답 시간) 그렇지 않으면 페이지가 빠르게로드되므로 별도로 (병렬 방식으로)로드하면로드 속도가 빨라질 수 있습니다. 그러나 그것은 정말 B))가에 따라 달라집니다

— jave.web에게

7

http://www.utf8-chartable.de/

문자를 바꿔야합니다 | 해당 UTF-8 문자로

href="http://fonts.googleapis.com/css?family=Cookie%7cAmaranth%7cKaushan+Script%7cCousine%7cBilbo+Swash+Caps%7cRancho&amp;effect=shadow-multiple"

— 라 포스
소스

-3

내 사건은 미친 줄 바꿈 문자였습니다. 첨부 된 이미지를 참조하십시오.

— 글쎄 스미스
소스

-4

나는 촉각 근 및 "와 & A; "미세 예를 작동합니다

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

— 오스카 텔로
소스

1

이 질문은 ;-)가 |아니라 캐릭터에 관한 것입니다.&

— jave.web