woff2 feature test

켈 이 프로젝트는 보관되어 있으며 저장소는 더 이상 유지 관리되지 않습니다.

Woff2- 기능 테스트

Woff2 글꼴 형식에 대한 간단한 기능 테스트.

• NPM에서 woff2-feature-test 로 제공됩니다

유스 케이스

우리가 모든 서체를 포함하는 스타일 시트를 데이터 URI로 비동기로로드하기 위해 loadCSS 사용한다는 점을 감안할 때, WOFF2 형식이 브라우저에서 지원되는지 프로그래밍 방식으로 결정하는 방법이 필요합니다.

 var fontFile = "/url/to/woff.css";

// Use WOFF2 if supported
if( supportsWoff2 ) {
	fontFile = "/url/to/woff2.css";
}

loadCSS( fontFile );

요구 사항

1. 원격 서버에 HTTP 요청을하지 않아야합니다. 원격 테스트 파일을 사용하는 모든 것이 나왔습니다.
2. 비동기식에 대한 동기식 접근 방식을 선호합니다. 우리는 그것을 실행하고 결과를 즉시 사용할 수 있도록합니다.
3. 단순한 추론 이상. 현재 WOFF2에 대한 지원과 일치한다는 점에서 글꼴 로딩 API의 존재에 따라 추론 할 수 있다고 제안되었습니다. 그러나 브라우저가 글꼴로드 API를 구현하지만 WOFF2를 구현하지 않으면 어떻게됩니까? 이 시나리오는 전적으로 가능한 것처럼 보였고 우리는 잘못된 긍정을 원하지 않았습니다.

접근하다

글꼴로드 API를 사용하여 빈 WOFF2 데이터 URI를로드하고 글꼴 세트 상태가로드되는지 여부를 확인합니다. 로드를 시도하면 형식이 지원됩니다. 그렇지 않은 경우 형식은 인식되지 않습니다 (가상 형식의 의도적으로 실패한 테스트 참조).

데모

브라우저가 결국 WOFF2 형식을 구현하지만 글꼴로드 API를 구현하지 않으면이 스크립트는 위에서 설명한 잘못된 긍정적 시나리오보다 바람직한 음성을보고합니다.

제한

font-src 에서 제한적인 컨텐츠 보안 정책 헤더를 사용하는 경우이 기능 테스트에 문제가 발생할 수 있습니다.

또한 컨텐츠 보안 정책이 데이터 URI를 허용하는지 확인해야합니다.

예를 들어, github.com (github.io가 아님)은 Content-Security-Policy:default-src *; font-src assets-cdn.github.com; @font-face data uri를 거부합니다.

부록

이 스크립트의 몇 가지 이전 개정판은 요점에서 찾을 수 있습니다.