FOUC를 피하기 위해 @font-face를 사용하여 글꼴이 로드된 시기를 어떻게 감지할 수 있습니까?

@font-face를 사용하여 글꼴 로드 상태 감지

종종 웹 개발자는 아이콘이나 글꼴이 다음과 같이 표시되는 상황에 직면합니다. 글꼴 파일이 완전히 로드될 때까지 자리 표시자 문자입니다. 이는 사용자 경험을 산만하게 하거나 방해할 수 있습니다. 이 문제를 해결하려면 글꼴이 언제 로드되었는지 아는 것이 중요합니다.

글꼴 로드 감지 문제

질문에 언급된 특정 시나리오에서 Font-Awesome 아이콘은 글꼴 파일의 로딩이 지연되어 처음에는 로 표시됩니다. 목표는 글꼴이 로드될 때까지 이러한 아이콘을 숨겨 웹 사이트의 시각적 모양과 기능을 향상시키는 것입니다.

글꼴 로드 감지 솔루션

전체를 기다리는 동안 페이지를 로드하는 것이 불가능할 수 있는 경우 글꼴이 특별히 로드되었는지 확인하는 방법이 있습니다. 한 가지 효과적인 접근 방식은 두 가지 다른 글꼴로 렌더링된 문자열의 너비를 비교하는 것입니다.

jQuery-FontSpy.js 플러그인

이 프로세스를 단순화하기 위해 jQuery-FontSpy .js 플러그인이 개발되었으며 GitHub(https://github.com/patrickmarabeas/jQuery-FontSpy.js)에서 사용할 수 있습니다. 이 플러그인은 글꼴 로딩을 감지하고 그에 따라 스타일을 적용하는 직관적인 방법을 제공합니다.

jQuery-FontSpy.js 사용

플러그인을 사용하려면 플러그인의 JavaScript 파일을 프로젝트를 만들고 대상 요소에서 초기화합니다. 글꼴 로드 상태에 따라 추가되거나 제거될 사용자 정의 클래스를 지정할 수 있습니다. 예:

<span class="bannerTextChecked">FontAwesome Icon</span>

$(document).ready(function() {
    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });
});

FOUC 제거용 CSS

FOUC(Flash of Unstyled Content)를 완전히 제거하려면 적절한 CSS를 적용하세요. 규칙:

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fallback font */
    /* apply necessary styling to avoid layout issues with the fallback font */
}

결론

글꼴 로드 감지 기술을 활용하면 글꼴이 완전히 로드되었을 때만 표시되도록 하여 사용자 경험을 향상시킬 수 있습니다. jQuery-FontSpy.js를 사용하면 특정 글꼴의 로드 상태에 따라 스타일을 추가할 수 있어 이 프로세스가 수월해집니다.

위 내용은 FOUC를 피하기 위해 @font-face를 사용하여 글꼴이 로드된 시기를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!