Google AMP amp-font
Опубликовано: 12 Апреля, 2022
Amp-font используется для проверки того, загружен ли шрифт на HTML- страницу AMP.
Required Scripts: Import amp-font into the header.
HTML
< script async custom-element = "amp-font" </ script > |
Мы используем следующий стиль, чтобы отображать шрифт красным цветом, если шрифт недоступен.
HTML
< style amp-custom> :root { --color-error: #B00020; --color-primary: #005AF0; } @font-face { font-family: "UnavailableFont"; font-style: normal; font-weight: 400; src: url(fonts/UnavailableFont.ttf) format("truetype"); } @font-face { font-family: "Comic AMP"; font-style: normal; font-weight: 400; src: local("Comic AMP"), url(/static/samples/fonts/ComicAMP.ttf) format("truetype"); } @font-face { font-family: "Comic AMP 2"; font-style: normal; font-weight: 400; src: local("Comic AMP"), url(/static/samples/fonts/ComicAMP2.ttf) format("truetype"); } .unavailable-font-loaded .unavailable-font { font-family: "UnavailableFont"; } .comicamp-loaded .comicamp { font-family: "Comic AMP"; } .comicamp2-loaded .comicamp2 { font-family: "Comic AMP 2"; } .comicamp-loading .comicamp, .comicamp2-loading .comicamp2, .unavailable-font-loading .unavailable-font { color: var(--color-primary); } .comicamp-missing .comicamp, .comicamp2-missing .comicamp2, .unavailable-font-missing .unavailable-font { color: var(--color-error); } </ style > |
Атрибуты:
- font-family: определяет шрифт примера семейства: futura, georgia и т. д.
- layout: определяет конкретный макет, этот атрибут должен иметь значение nodisplay.
Example: Here, the second font family is set as abc since there is not family by the name abc it is displayed in red color.
HTML
<!doctype html> < html amp> < head > < meta charset = "utf-8" > < title >Google AMP amp-font</ title > < script async src = </ script > < script async custom-element = "amp-font" </ script > < link rel = "canonical" href = < 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 > < style amp-custom> :root { --color-error: #B00020; --color-primary: #005AF0; } @font-face { font-family: "UnavailableFont"; font-style: normal; font-weight: 400; src: url(fonts/UnavailableFont.ttf) format("truetype"); } @font-face { font-family: "Comic AMP"; font-style: normal; font-weight: 400; src: local("Comic AMP"), url(/static/samples/fonts/ComicAMP.ttf) format("truetype"); } @font-face { font-family: "Comic AMP 2"; font-style: normal; font-weight: 400; src: local("Comic AMP"), url(/static/samples/fonts/ComicAMP2.ttf) format("truetype"); } .unavailable-font-loaded .unavailable-font { font-family: "UnavailableFont"; } .comicamp-loaded .comicamp { font-family: "Comic AMP"; } .comicamp2-loaded .comicamp2 { font-family: "Comic AMP 2"; } .comicamp-loading .comicamp, .comicamp2-loading .comicamp2, .unavailable-font-loading .unavailable-font { color: var(--color-primary); } .comicamp-missing .comicamp, .comicamp2-missing .comicamp2, .unavailable-font-missing .unavailable-font { color: var(--color-error); } </ style > </ head > < body > <!-- ## Existing font --> < div > < amp-font layout = "nodisplay" font-family = "georgia" timeout = "2000" on-error-remove-class = "comicamp-loading" on-error-add-class = "comicamp-missing" on-load-remove-class = "comicamp-loading" on-load-add-class = "comicamp-loaded" > </ amp-font > < p class = "comicamp" > geeks for geeks </ p > </ div > <!-- ## Unavailable font --> < div > < amp-font layout = "nodisplay" font-family = "abc" timeout = "2000" on-error-remove-class = "unavailable-font-loading" on-error-add-class = "unavailable-font-missing" on-load-remove-class = "unavailable-font-loading" on-load-add-class = "unavailable-font-loaded" > </ amp-font > < p class = "unavailable-font" > geeks for geeks </ p > </ div > </ body > </ html > |
Выход: