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

Katie Hempenius
Katie Hempenius
X

이 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'를 제거했습니다.

필기체 글꼴로 된 제목입니다.