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

Katie Hempenius
Katie Hempenius
X

이 코드 실습에서는 Font Face Observer를 사용하여 텍스트를 즉시 표시하는 방법을 보여줍니다.

Font Face Observer 추가

Font Face Observer는 글꼴이 로드될 때 이를 감지하는 스크립트입니다. fontfaceobserver.js 파일은 이미 프로젝트 디렉터리에 저장되어 있으므로 별도로 추가할 필요가 없습니다. 하지만 스크립트 태그를 추가해야 합니다.

  • 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  • index.html에 fontfaceobserver.js의 스크립트 태그를 추가합니다.
  <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를 구현하고 '보이지 않는 텍스트 플래시'를 제거한 것입니다.

스크러블 글꼴의 제목