آموزش تگ Fit Text در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش تگ Fit Text در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تگ Fit Text در گوگل AMP خواهیم پرداخت.

اگر فضای کافی برای ارائه نمایشگر وجود نداشته باشد ، برچسب آمپر amp-fit-text اندازه قلم را کاهش می دهد. در این فصل به طور مفصل در مورد این تگ بحث شده است.

برای کار با amp-fit-text باید اسکریپت زیر را اضافه کنیم –

&lt;script async custom-element = "amp-fit-text" 
   src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"&gt;
&lt;/script&gt;

src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">

</script>

تگ amp-fit-text

فرمت تگ amp-fit-text در زیر نشان داده شده است –

&lt;amp-fit-text width = "200" height = "200" layout = "responsive"&gt;
   Text here 
&lt;/amp-fit-text&gt;

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

Text here

</amp-fit-text>

مثال

بگذارید با کمک یک مثال این تگ را بهتر درک کنیم.

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Amp Fit-Text&lt;/title&gt;
      &lt;link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,  initial-scale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;-moz-animation:none;-ms
               -animation:none;animation:none}
         &lt;/style&gt;
      &lt;/noscript&gt;
      
      &lt;script async custom-element = "amp-fit-text" 
         src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Google AMP - Amp Fit-Text&lt;/h1&gt;
      &lt;div style = "width:150px;height:150px; "&gt;
         &lt;amp-fit-text 
            width = "150"
            height = "150"
            layout = "responsive"&gt;
               
            &lt;b&gt;Welcome To TutorialsPoint - You are browsing the best resource 
            for Online Education&lt;/b&gt;
         &lt;/amp-fit-text&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Amp Fit-Text</title>

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>

body{

-webkit-animation:none;-moz-animation:none;-ms

-animation:none;animation:none}

</style>

</noscript>

src = "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">

</script>

</head>

<body>

<h1>Google AMP - Amp Fit-Text</h1>

<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 مشاهده کردید، محتوا سعی می کند متناسب با فضای موجود تنظیم شود.
متن و آمپ متناسب با دو ویژگی max-font-size و min-font-size. همراه است.
وقتی از max-font-size استفاده می کنیم ، و اگر فضایی برای ارائه متن در دسترس نباشد، سعی در کاهش اندازه و تنظیم فضای موجود است.
در صورت تعیین min-font-size و اگر فضا در دسترس نباشد متن را کوتاه کرده و نقاطی را که متن مخفی است نشان می دهد.

مثال

بیایید یک نمونه کار را مشاهده کنیم که در آن ما max-font-size و min-font-size را به amp-fit-text تعیین خواهیم کرد.

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Amp Fit-Text&lt;/title&gt;
      &lt;link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"&gt;

      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         &lt;/style&gt;
     &lt;/noscript&gt;

      &lt;script async custom-element = "amp-fit-text" src = 
         "https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"&gt;
      &lt;/script&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;h1&gt;Google AMP - Amp Fit-Text&lt;/h1&gt;
      &lt;div style = "width:150px;height:150px; "&gt;
         &lt;amp-fit-text 
            width = "150"
            height = "150"
            layout = "responsive"
            max-font-size = "30"
            min-font-size = "25"&gt;
            
            &lt;b&gt;Welcome To TutorialsPoint - You are 
            browsing the best resource for Online Education&lt;/b&gt;
         &lt;/amp-fit-text&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Amp Fit-Text</title>

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>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none}

</style>

</noscript>

"https://cdn.ampproject.org/v0/amp-fit-text-0.1.js">

</script>

</head>

<body>

<h1>Google AMP - Amp Fit-Text</h1>

<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 Fit-Text Tag

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش تگ Fit Text در گوگل AMP

آموزش تگ Fit Text در گوگل AMP

تگ amp-fit-text

مثال

خروجی

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش تگ Fit Text در گوگل AMP

تگ amp-fit-text

مثال

خروجی

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه