@font-face를 사용하여 사용자 정의 글꼴이 로드되면 어떻게 감지할 수 있습니까?

사용자 정의 글꼴(@font-face)의 로드를 감지하는 방법은 무엇입니까?

@font-face를 사용하여 사용자 정의 글꼴을 통합하는 경우 규칙에 따르면 글꼴 파일이 성공적으로 로드된 시기를 확인하는 것이 중요합니다. 이 지식이 없으면 글꼴을 사용할 수 있을 때까지 자리 표시자 문자(예: "")가 표시되는 문제가 발생할 수 있습니다.

해결책: jQuery FontSpy.js

널리 사용되는 솔루션은 jQuery FontSpy.js 플러그인입니다. 이 플러그인을 사용하면 사용자 정의 글꼴이 있는지 여부에 따라 요소의 스타일을 지정할 수 있습니다. 로드되었습니다.

구현

FontSpy.js를 활용하려면 다음 단계를 따르세요.

1. 포함 플러그인의 JavaScript 파일을 프로젝트.


2. 사용자 정의 글꼴을 표시할 요소에fontSpy 함수를 적용합니다.


3. onLoad 및 onFail 클래스와 같은 옵션을 구성하여 글꼴이 로드되거나 로드되지 않을 때 적용됩니다. 각각.

플러그인은 두 가지 다른 글꼴로 표시되는 문자열의 너비를 비교하여 작동합니다. 너비가 다르면 사용자 정의 글꼴이 성공적으로 로드되었음을 나타냅니다.

코드 예

FontSpy.js를 요소에 적용하는 다음 코드 조각을 고려하세요. 수업 my-icons:

<br>$(document).ready(function() {<br> $('.my-icons').fontSpy({</p>
<pre class="brush:php;toolbar:false">onLoad: 'show-icons',
onFail: 'hide-icons'

});
});

사용자 정의 글꼴이 로드되면 , show-icons 클래스가 요소에 적용되어 아이콘이 표시됩니다. 글꼴 로드에 실패하면 hide-icons 클래스가 대신 적용됩니다.

추가 고려 사항

• 대체 글꼴: 지정 사용자 정의 글꼴이 실패할 경우 표시할 FontSpy 구성의 대체 글꼴 load.
• 시간 초과: FontSpy.js에는 무한 대기를 방지하기 위한 시간 초과 메커니즘이 포함되어 있습니다. 잠재적인 지연을 방지하려면 timeOut 옵션을 구성하세요.
• 브라우저 지원: FontSpy.js는 Chrome, Firefox, Safari, Edge를 포함한 최신 브라우저를 지원합니다.
• 교차 출처 글꼴: FontSpy.js는 교차 출처 글꼴 로딩을 처리합니다. 원활하게.

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