이 코드 실습에서는 Font Face Observer를 사용하여 텍스트를 즉시 표시하는 방법을 보여줍니다.
Font Face Observer 추가
Font Face Observer는 글꼴이 로드될 때 이를 감지하는 스크립트입니다. fontfaceobserver.js 파일은 이미 프로젝트 디렉터리에 저장되어 있으므로 별도로 추가할 필요가 없습니다. 하지만 스크립트 태그를 추가해야 합니다.
- 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
fontfaceobserver.js의 스크립트 태그를index.html에 추가합니다.
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Font Face Observer 사용
관찰자 만들기
페이지에서 사용되는 각 글꼴 모음에 관찰자를 만듭니다.
fontfaceobserver.js스크립트 뒤에 다음 스크립트를 추가합니다. 이렇게 하면 'Pacifico' 및 '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')를 추가합니다. Times와 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");
이렇게 하면 두 글꼴이 모두 로드된 후 문서의 루트 요소 (<html> 태그)에 fonts-loaded 클래스가 추가됩니다.
✔️체크인
완성된 스크립트는 다음과 같습니다.
<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;
}
확인
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.
페이지가 다음과 같이 표시되면 Font Face Observer를 구현하고 '보이지 않는 텍스트 플래시'를 제거한 것입니다.
