@font-face 규칙이 적용되는시기를 말하는 방법

StackOverflow https://stackoverflow.com/questions/1817474

문제

@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이 '........'로 설정되고 너비가 측정되는 임시 요소에 적용됩니다. 너비가 다르면 브라우저가 제공 한 새 글꼴 데이터를 렌더링 한 것을 알고 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top