Google AMP - Phù hợp với văn bản

Thẻ Amp amp-fit-textsẽ giảm kích thước phông chữ, nếu không gian không đủ để hiển thị màn hình. Chương này thảo luận chi tiết về thẻ này.

Để amp-fit-text hoạt động, chúng ta cần thêm tập lệnh sau:

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

Thẻ Amp Fit-Text

Định dạng cho thẻ văn bản amp-fit được hiển thị bên dưới:

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

Thí dụ

Hãy để chúng tôi hiểu rõ hơn về thẻ này với sự trợ giúp của ví dụ.

<!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>

Đầu ra

Đầu ra của mã được đưa ra ở trên như được hiển thị bên dưới:

Nếu bạn thấy màn hình sử dụng amp-fit-text, thì nội dung sẽ cố gắng điều chỉnh theo không gian có sẵn.

Amp-fit-text có 2 thuộc tính max-font-size và min-font-size.

Khi chúng tôi sử dụng kích thước phông chữ tối đa và nếu không có sẵn không gian để hiển thị văn bản, nó sẽ cố gắng giảm kích thước và điều chỉnh bên trong không gian có sẵn.
Trong trường hợp chúng tôi chỉ định kích thước phông chữ tối thiểu và nếu không gian trống, nó sẽ cắt bớt văn bản và hiển thị các dấu chấm nơi văn bản bị ẩn.

Thí dụ

Hãy để chúng tôi xem một ví dụ làm việc trong đó chúng tôi sẽ chỉ định cả kích thước phông chữ tối đa và kích thước phông chữ tối thiểu thành 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"
            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>

Đầu ra