보이지 않는 텍스트 번쩍거림 방지

케이티 헴페니우스
Katie Hempenius
X

이 Codelab에서는 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>

글꼴 얼굴 관찰자 사용

관찰자 만들기

페이지에 사용되는 각 글꼴 모음의 관찰자를 만듭니다.

  • 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')를 추가합니다. 시간 및 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;
}

확인

  • 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.

페이지가 다음과 같다면 Font Face Observer를 성공적으로 구현하고 'Flash of Invisible Text'를 삭제한 것입니다.

필기체 글꼴로 된 제목.