구글 AMP – Fit Text - 구글 블로그 AMP

Amp 태그 amp-fit-text는 디스플레이를 렌더링하기에 공간이 충분하지 않은 경우 글꼴 크기를 줄입니다. 이 글에서는 이 태그에 대해 자세히 설명합니다.

amp-fit-text가 작동하도록 하려면 다음 스크립트를 추가해야 합니다.

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

AmpFit-Text 태그

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

<amp-fit-text width="200"
              height="200"
              layout="responsive">
  Text here
</amp-fit-text>

예제

예제를 통해 이 태그를 더 잘 이해하도록 하겠습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Fit-Text</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-fit.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-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Fit-Text</h1>
<div style="width:150px;height:150px;">
  <amp-fit-text width="150"
                height="150"
                layout="responsive">
    <b>Welcome To TutorialsPoint - You are browsing the best resource for Online Education</b>
  </amp-fit-text>
</div>
</body>
</html>

결과

위에 주어진 코드의 출력은 다음과 같습니다.

amp-fit-text를 사용하는 디스플레이가 표시되면 콘텐츠가 사용 가능한 공간에 따라 조정을 시도합니다.

Amp-fit-text에는 max-font-size 및 min-font-size 2개의 속성이 있습니다.

max-font-size를 사용하고 텍스트를 렌더링하는 데 공간을 사용할 수 없는 경우 크기를 줄이고 사용 가능한 공간 내에서 조정하려고 합니다.
min-font-size를 지정하고 공백을 사용할 수 없는 경우 텍스트를 자르고 텍스트가 숨겨진 곳에 점을 표시합니다.

예제

max-font-size와 min-font-size를 모두 amp-fit-text에 지정하는 작업 예제를 살펴보겠습니다.

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Fit-Text</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-fit.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-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
</head>
<body>
<h1>Google AMP - Amp Fit-Text</h1>
<div style="width:150px;height:150px;">
  <amp-fit-text width="150"
                height="150"
                layout="responsive"
                max-font-size="30"
                min-font-size="25">
    <b>Welcome To TutorialsPoint - You are browsing the best resource for Online Education</b>
  </amp-fit-text>
</div>
</body>
</html>

구글 블로그 AMP

이 블로그 검색

구글 AMP – Fit Text

AmpFit-Text 태그

예제

결과

예제

결과

관심 있을 만한 글

댓글 쓰기

Live Blogger