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와 같은 글꼴 속성으로 작업하는 방법을 보여줍니다. 클래스는 글꼴 로드에 오류 또는 성공 여부를 결정합니다.