@font-face 규칙이 적용되는시기를 말하는 방법
-
08-07-2019 - |
문제
@font-face 규칙이 언제 적용되는지 알 수있는 방법이 있습니까? 데이터를 사용하는 @font-face 규칙을 만들고 있습니다. javaScript의 동기식 XMLHTTPREQUEST로 요청한 글꼴 파일의 URI를 사용한 다음 글꼴을 사용하여 캔버스 요소에 텍스트를 작성합니다. 문제는 처음 몇 밀리 초에 텍스트를 그릴 때 실제로 글꼴을 사용하지 않는다는 것입니다. 내 현재 솔루션은 끔찍한 솔루션 인 동기식 XMLHTTPREQUEST를 보내서 몇 밀리 초의 실행을 차단하는 것입니다.
구현을위한 것과 같이 이것을 비동기로 만들 수 없습니다. 처리'에스 loadFont()
동기식 인 함수 Processing.js.
글꼴에 특정 문자가 있고 그 차원이 현재 글꼴의 동일한 문자와 다르다는 보장이 없기 때문에 솔루션이 문자의 크기를 확인하지 않기를 원합니다.
해결책
짧은 답변 : 브라우저는 아직 글꼴을 사용하지 않고 확인하지 않고 "로드 및 사용할 준비가 된"것을 테스트 할 수있을만큼 충분하지 않습니다.
긴 답변 : PJS는 글꼴 예압 용 글꼴 유효성 검사기와 함께 제공됩니다 (관련 https://github.com/pomax/font.js) 그러나 당신이 지적한 바와 같이, 그것은 data-uri를 사용하는 @font-face 규칙에서는 작동하지 않습니다. 내가 제안 할 해결 방법 (아직 이것을 시도하지는 않았지만, 프로세스에 대한 나의 작업을 기반으로 작동한다고 생각합니다. 검은 색 채우기 텍스트로 흰색 배경을 모두 만들고 첫 번째 버퍼에서 텍스트 ( "x", 0,0)를 수행 한 다음 글꼴로드 후 두 번째 버퍼를 사용하여 동일한 텍스트 ( "x", 0, 0 "). 각 버퍼의 픽셀 []를 잡고 나란히 비교하십시오.
boolean verifyFontLoad() {
buffer1.loadPixels();
buffer2.loadPixels();
for (int i=0; i<buffer1.pixels.length; i++) {
if (buffer1.pixels[i] != buffer2.pixels[i]) {
return false; }}
return true;
}
글꼴을로드 할 때는 글꼴로드 상태를 나타내는 추적 부울 어딘가에, "false"로 인정 받고, font를로드 한 후, draw () 호출 시작시 글꼴을로드 한 후
void draw() {
// code that does not rely on your font
[...]
// check state
if(!fontLoaded) { fontLoaded = verifyFontLoaded(); }
// not ready? "stop" drawing.
if(!fontLoaded) { return; }
// font ready. run code that relies on the font being ready
else {
// code that depends on your font being available goes here.
}
}
이제 최소한 브라우저가 Data-URI 글꼴 포장을 풀고 @font-face 리소스로로드 한 첫 몇 개의 프레임을 피할 수 있지만 아직 Canvas2D 렌더링 시스템으로 전달할 시간이 없었습니다.
(이 시점에서 글꼴로 DOM 요소 스타일링은 실제로 잘 작동합니다. 실제로는 캔버스 2D로 넘겨 주어서 하나 이상의 프레임을 사용할 수 없도록합니다)
다른 팁
차원 검사를 선호하지 않더라도 modernizr @font-face 기능 감지가 작동하며 가장 좋은 방법 일 수 있습니다.
Modernizr는 데이터를 사용하여 작은 글꼴 글리프를 포함시킵니다 : uri. 이것에서 싱글 "". " 캐릭터가 생성됩니다. 그런 다음 InnerHTML이 '........'로 설정되고 너비가 측정되는 임시 요소에 적용됩니다. 너비가 다르면 브라우저가 제공 한 새 글꼴 데이터를 렌더링 한 것을 알고 있습니다.