@ Font-face와 offsetWidth 속성의 잘못된 값

최신 버전의 Chromium에서이 문제가 발생합니다. @ font-face을 통해 임베드 된 글꼴 패밀리를 사용하는 첫 번째 요소를 만든 후 잘못된 offsetXyz 값이 전달됩니다. 스크립트가 실행될 때까지는 window.onload 훅이 이미 시작되고 폰트는 이미로드되어있을 것이다.@ Font-face와 offsetWidth 속성의 잘못된 값

이 스크립트는 (개략적) 모습입니다 :

var e = document.createElement("span"); 
e["innerText" in e?"innerText":"textContent"] = "fooBar"; 
e.style.fontFamily = "fontFaceEmbeddedFontFamily"; 
document.body.appendChild(e); 

alert(e.offsetWidth); // Returns two different values 
setTimeout(function() { 
    alert(e.offsetWidth); // The latter being correct 
}, 1000);

값은 "자동"으로 업데이트됩니다. 값을 수정하는 것을 기다리는 방법은 없지만 간단히 setInterval- 값을 확인한 다음 솔루션을 렌더링합니다. 나는 그런 더러운 것을하는 것을 공상하지 않는다.

누구든지 어떤 방법으로 진행할 수 있습니까? src: local(" ... ")이 지정되지 않은 경우에만 발생하며, 따라서 문제는 다운로드됩니다. 글꼴에 따라 다릅니다.

출처

2011-05-13 Witiko

어쩌면 당신이 어떤 도움을 여기에서 찾을 수 있습니다 http://paulirish.com/2009/fighting-the-font-face-fout/ - 일부 브라우저에서는 글꼴이 다운로드 된 다음 전환 할 때까지 "스타일이없는"텍스트를 표시하는 것이 일반적으로 보입니다. – James

글쎄, 내가 말했듯이 폰트는 window.onload 이벤트가 ** 발생한 후에 ** 스크립트가 실행될 때 이미로드되어야합니다. 요소가 문서의 본문에 추가 될 때 이미로드되고 시각적으로 적용됩니다. 오프셋 값이 잘못되었습니다. – Witiko

귀하는 이미 답변을드립니다. src: local()을 설정하면 일반적으로 @font-face을 사용할 때 bulletproof syntax을 사용합니다. 여기에있는 브라우저 문제를 극복하기 위해 만들어 졌기 때문에 일반적으로 @font-face을 사용합니다.

출처

2011-06-19 11:43:39

나는 거의 1 년이지만,이 문제도있어 반일 동안 원인을 발견했다. 시간 초과를 사용하는 대신 전체 페이지가로드 될 때까지 기다릴 수 있습니다. src: local()은 나에게 아무런 차이가 없었습니다.

<body onload="finished()">

또는 jQuery를에을 : 그래서 당신이 사용할 수있는

$(window).load(
    function() { 
     // this only will execute when the entire page is loaded. 
    } 
);

출처

2012-01-22 07:28:37 hugotacito

두 번째 접근법 (** BODY 태그에 물건을 넣지 않은 **처럼)이 더 좋지 않습니까? –

@ Font-face와 offsetWidth 속성의 잘못된 값

답변

관련 문제