@font-face 새로 고침 시 Chrome에서 텍스트가 표시되지 않음...항상 그렇지는 않아?

@font-face 새로 고침 시 Chrome에서 텍스트가 표시되지 않음...항상 그렇지는 않아?

제 Word Press 사이트는 http://pangalactic.co/ 입니다.

Chrome을 사용하면 로고 아래의 텍스트와 사이트 페이지(로고 오른쪽)에 관련된 텍스트가 보이지 않을 수 있습니다.Chrome에서 새로 고침을 시도하면 보이지 않습니다.그러나 사이트 로고를 클릭하여 새로 고치면 텍스트가 다시 나타납니다.관련 @font-face 텍스트는 다음과 같습니다.

@font-face {
font-family: 'BebasNeueRegular';
src: url("fonts/bebas-neue/BebasNeue-webfont.eot");
src: url("fonts/bebas-neue/BebasNeue.otf");
src: url("fonts/bebas-neue/BebasNeue-webfont.eot?#iefix") format("embedded-opentype"),     url("fonts/bebas-neue/BebasNeue-webfont.woff") format("woff"), url("fonts/bebas-    neue/BebasNeue-webfont.ttf") format("truetype"), url("fonts/bebas-neue/BebasNeue-    webfont.svg#BebasNeueRegular") format("svg");
font-weight: normal;
font-style: normal; 
}

버그 리포트에 제시된 다음 해킹을 사용하여 Paul Irish가 나와 연계되어 있습니다.

.classes-affected-by-issue
{
    -webkit-animation-duration: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.1s;
}

@-webkit-keyframes fontfix{
    from{   opacity: 1; }
    to{ opacity: 1; }
}

Chrome이 문제를 해결하기 위해 글꼴을 다시 그리도록 강제합니다.

프로덕션 서버에서 이 코드를 제거할 수 있는 시기를 확인하려면 버그 보고서를 확인하십시오.

이 문제는 35.0.1867.2 카나리아로 종료되었습니다.그러나 클라이언트가 이 버전으로 업데이트될 때까지 코드를 유지하십시오.

Chromium 버그에 따르면 폰트를 로드하면서 스타일시트를 변경할 때 발생하는 것 같습니다.저의 경우, 페이지 하단에 소셜 공유 버튼을 삽입하는 스크립트가 문제의 원인이었습니다.그 스크립트 때문에 페이지의 스타일시트가 바뀌었어요.

내게 효과가 있었던 건 해킹이야

$(document).ready(function(e) {
    setTimeout(function() {
        $('body').width($('body').width()+1).width('auto');
    }, 500);
});

이렇게 하면 본문의 크기가 조정되어 글꼴이 다시 그려집니다.이는 jQuery를 사용하고 있으며 본문의 css 너비가 "auto"여야 한다고 가정합니다.글꼴 문제가 발생했을 때 페이지에 잠깐 깜박임이 발생하지만 적어도 그 이후에는 글꼴이 표시됩니다.

이것이 버전 35에서 수정되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/21948022/font-face-text-is-invisible-in-chrome-on-refresh-but-not-always