구글 AMP – Font - 구글 블로그 AMP

Amp 글꼴은 기본적으로 amp 페이지에 대한 사용자 지정 글꼴을 트리거하고 모니터링하는 데 도움이 되는 amp의 amp 구성 요소입니다. 이 글에서는 amp-font에 대해 자세히 설명합니다.

Amp-font를 사용하려면 다음 자바스크립트 파일을 추가해야 합니다.

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

Amp-font 구성 요소는 글꼴 로드에 걸리는 시간을 제어하는데 사용됩니다. ms 초 단위의 시간이 걸리는 timeout 속성이 있으며 기본적으로 3000ms입니다. 구성 요소는 필요한 글꼴이 로드되었는지 또는 오류 상태가 되었는지에 따라 document.documentElement 또는 document.body에서 클래스를 추가 / 제거할 수 있습니다.

amp-font 태그의 형식은 다음과 같습니다.

<amp-font layout="nodisplay" 
          font-family="Roboto Italic"
          timeout="2000"
          on-error-remove-class="robotoitalic-loading" 
          on-error-add-class="robotoitalic-missing"
          on-load-remove-class="robotoitalic-loading"
          on-load-add-class="robotoitalic-loaded">
</amp-font>

amp 페이지에서 amp-font를 사용하는 방법에 대한 작업 예는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Font</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-font.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
  <style amp-custom>
    @font-face {
      font-family: 'This font is not available';
      font-style: normal;
      font-weight: 300;
      src: url(fonts/MissingFont.ttf) format('truetype');
    }
    .font-missing {
      color:red;
      font-size:25px;
    }
  </style>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<h1>Google AMP - Amp Font</h1>
<amp-font layout="nodisplay"
          font-family="Font Does Not exist"
          timeout="2000"
          on-error-remove-class="font-missing"
          on-error-add-class="font-error"
          on-load-remove-class="font-missing"
          on-load-add-class="font-loaded">
</amp-font>
<p class="font-missing">
  로드할 글꼴 파일이 작동할 때 on-error-remove-class, on-error-add-class, on-load-remove-class 및 on-load-add-class 속성이 작동하는 방식을 보여주는 amp 글꼴 구성 요소의 예는 존재하지 않습니다.
</p>
</body>
</html>

결과

위에 제공된 샘플 코드의 출력은 다음과 같습니다.

글꼴 파일이 성공적으로 로드될 때 amp-font의 예는 다음과 같습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Font</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-font.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
  <style amp-custom>
    @font-face {
      font-family: 'This font is not available';
      font-style: normal;
      font-weight: 300;
      src: url(fonts/MissingFont.ttf) format('truetype');
    }
    @font-face {
      font-family: 'Roboto Italic';
      font-style: normal;
      font-weight: 300;
      src:url(fonts/Roboto-Italic.ttf) format('truetype');
    }
    .font-missing {
      color:red;
      font-size:25px;
    }
    .robotoitalic-loading {
      color: green;
    }
    .robotoitalic-loaded {
      font-size:25px;
      color: blue;
    }
    .robotoitalic-missing {
      color: red;
    }
    .robotoitalic {
      font-family: 'Roboto Italic';
    }
  </style>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
</head>
<body>
<h1>Google AMP - Amp Font</h1>
<amp-font layout="nodisplay"
          font-family="Font Does Not exist"
          timeout="2000"
          on-error-remove-class="font-missing"
          on-error-add-class="font-error"
          on-load-remove-class="font-missing"
          on-load-add-class="font-loaded">
</amp-font>
<p class="font-missing">
  로드할 글꼴 파일이 작동할 때 on-error-remove-class, on-error-add-class, on-load-remove-class 및 on-load-add-class 속성이 작동하는 방식을 보여주는 amp 글꼴 구성 요소의 예는 존재하지 않습니다.
</p>
<amp-font layout="nodisplay"
          font-family="Roboto Italic"
          timeout="2000"
          on-error-remove-class="robotoitalic-loading"
          on-error-add-class="robotoitalic-missing"
          on-load-remove-class="robotoitalic-loading"
          on-load-add-class="robotoitalic-loaded">
</amp-font>
<p class="robotoitalic">
  글꼴 파일이 존재하고 정상적으로 로드될 때 on-error-remove-class, on-error-add-class, on-load-remove-class 및 on-load-add-class 속성이 작동하는 방식을 보여주는 amp-font 구성 요소의 예.
</p>
</body>
</html>

결과

위에 제공된 샘플 코드의 출력은 다음과 같습니다.

위의 예제는 font-family, timeout, on-error-remove-class, on-error-add-class, on-load-remove-class, on-load-add.class와 같은 글꼴 속성으로 작업하는 방법을 보여줍니다. 클래스는 글꼴 로드에 오류 또는 성공 여부를 결정합니다.

구글 블로그 AMP

이 블로그 검색

구글 AMP – Font

예제

결과

예제

결과

관심 있을 만한 글

댓글 쓰기

Live Blogger