이 Codelab에서는 글꼴 이미지)를 사용하여 즉시 텍스트를 표시하는 방법을 보여줍니다. 관찰자.
Font Face 관찰자 추가
글꼴 관찰자는 스크립트입니다.
이 함수는 글꼴이 로드되는 시점을 감지합니다. 이
fontfaceobserver.js
드림
파일이 이미 프로젝트 디렉터리에 저장되었으므로 추가할 필요가 없습니다.
별도로 관리할 수 있습니다 하지만 스크립트 태그를 추가해야 합니다.
- 수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.
fontfaceobserver.js
의 스크립트 태그를index.html
에 추가합니다.
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
글꼴 관찰자 사용
관찰자 만들기
페이지에서 사용되는 각 글꼴 모음의 관찰자를 만듭니다.
fontfaceobserver.js
스크립트 뒤에 다음 스크립트를 추가합니다. 이렇게 하면 '퍼시픽코' 관찰자들은 'Roboto'라고 합니다. 글꼴 모음:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
어떤 글꼴 관찰자를 만들어야 할지 잘 모르겠다면
CSS의 font-family
선언도 포함됩니다. 이러한 선언의 font-family
이름을
FontFaceObserver()
다음 항목의 글꼴 관찰자를 만들 필요는 없습니다.
대체 글꼴입니다.
예를 들어 CSS가 다음과 같은 경우
font-family: "Times New Roman", Times, serif;
FontFaceObserver('Times New Roman')
를 추가합니다. 시간과 Serif는
대체 글꼴이므로 FontFaceObservers를 선언할 필요가 없습니다.
글꼴 로드 감지
글꼴 로드를 감지하는 코드는 다음과 같습니다.
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
는 글꼴이 로드될 때 확인되는 프로미스입니다.
데모 사이트에서는 두 가지 글꼴을 사용하므로 Promise.all()
를 사용해야 합니다.
두 글꼴이 모두 로드될 때까지 기다립니다
- 작성한 FontFaceObservers 바로 아래에 이 프라미스를 스크립트에 추가합니다. 방금 선언했습니다.
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️체크인
이제 스크립트가 다음과 같이 표시됩니다.
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
fonts-loaded
클래스 적용
- 스크립트의
/* Do things */
주석을 다음 줄로 바꿉니다.
document.documentElement.classList.add("fonts-loaded");
이렇게 하면 fonts-loaded
클래스가 문서의 루트 요소(
<html>
태그)를 호출합니다.
✔️체크인
완성된 스크립트는 다음과 같습니다.
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
CSS 업데이트
처음에는 시스템 글꼴을 사용하고 한 번 맞춤 글꼴을 사용하도록 페이지 스타일을 지정해야 합니다.
fonts-loaded
클래스가 적용되었습니다.
- CSS를 업데이트합니다.
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
확인
- 사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
페이지가 다음과 같이 표시되면 글꼴 Observer로 이동하고 'Flash of Invisible Text'를 제거했습니다.