Учебники

Google AMP — Fit Text

Ноябрь 7, 2018

Amp tag 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>

Amp Fit-Text Tag

Формат для текстового тега с усилением показан ниже — 

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

пример

Давайте лучше разберемся в этом теге на примере. 

<!doctype html>
<html amp lang = "en">
   <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 = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,  initial-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, содержимое пытается отрегулировать в соответствии с доступным пространством.

Amp-fit-text поставляется с 2 атрибутами max-font-size и min-font-size .

  • Когда мы используем max-font-size, и если пространство не доступно для визуализации текста, оно будет пытаться уменьшить размер и скорректировать доступное пространство.

  • В случае, если мы указываем min-font-size, и если пространство не доступно, оно обрезает текст и показывает точки, где текст скрыт.

Когда мы используем max-font-size, и если пространство не доступно для визуализации текста, оно будет пытаться уменьшить размер и скорректировать доступное пространство.

В случае, если мы указываем min-font-size, и если пространство не доступно, оно обрезает текст и показывает точки, где текст скрыт.

пример

Давайте посмотрим на рабочий пример, где мы будем указывать max-font-size и min-font-size для amp-fit-text.

51
Share: