깨진 아이콘 표시를 방지하기 위해 CSS `@font-face` 글꼴이 로드되었을 때 어떻게 감지할 수 있습니까?

CSS @font-face에 대한 글꼴 로드 상태 감지

문제:
다음을 사용하여 글꼴을 통합할 때 @font-face, 아이콘은 처음에는 의도한 디자인 대신 ⓘ 기호가 있는 스타일이 지정되지 않은 원으로 나타날 수 있습니다. 이 문제는 글꼴 파일을 로드하는 데 시간이 걸리기 때문에 발생합니다.

질의:
올바른 아이콘을 보장하기 위해 @font-face 글꼴 파일이 로드되었는지 어떻게 확인할 수 있습니까? 디스플레이?

답변:

jQuery-FontSpy.js 플러그인:

이 오픈 소스 플러그인은 글꼴 로딩 상태를 감지합니다. Comic Sans MS(널리 사용 가능한 글꼴)에서 렌더링된 문자열의 너비를 사용자 정의 글꼴에서 렌더링된 동일한 문자열과 비교하여 로드하고 싶습니다. 너비가 다르면 사용자 정의 글꼴이 성공적으로 로드된 것입니다.

Customization:

• onLoad: 글꼴이 다음과 같을 때 추가된 클래스입니다. 로드되었습니다.
• onFail: 글꼴이 실패할 경우 추가되는 클래스 load.
• testFont: "Comic Sans MS"와 같이 널리 사용되는 글꼴.
• testString: 너비 비교에 사용되는 고유한 문자열입니다.
• 지연: 글꼴 너비 사이의 시간 checks.
• timeOut: 글꼴 오류를 가정하기 전 대기하는 최대 시간.

사용:

1. JQuery-FontSpy.js 플러그인을 HTML.
2. 검색하려는 글꼴 로딩이 있는 요소에 .bannerTextChecked 클래스를 적용합니다.
3. 플러그인 초기화:

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

4. 글꼴 로딩에 따라 요소 가시성을 제어하는 ​​사용자 정의 CSS 클래스 정의 상태.

예:

.hideMe {
  visibility: hidden !important;
}

.fontFail {
  visibility: visible !important;
  /* Style to resemble the custom font */
}

추가 참고 사항:

• FontAwesome 호환성은 현재 지원되지 않습니다.
• 자세한 내용과 라이브 데모, 방문: https://patrickmarabeas.github.io/jQuery-FontSpy.js

위 내용은 깨진 아이콘 표시를 방지하기 위해 CSS `@font-face` 글꼴이 로드되었을 때 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!