githubmirror/amphtml

examples/font.amp.html
105 строк6 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!doctype html>
<html ⚡ lang="en">
<head>
  <meta charset="utf-8">
  <title>Font example</title>
  <link rel="canonical" href="amps.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    @font-face {
      font-family: 'Comic AMP';
      font-style: normal;
      font-weight: 400;
      src: url(fonts/ComicAMP.ttf) format('truetype');
    }

    @font-face {
      font-family: 'Comic AMP Bold';
      font-style: bold;
      font-weight: 600;
      src: url(fonts/ComicAMPBold.ttf) format('truetype');
    }

    .comic-amp-font-loaded {
      font-family: 'Comic AMP', serif, sans-serif;
    }

    .comic-amp-bold-font-loaded .comic-amp-bold {
      font-family: 'Comic AMP Bold', serif, sans-serif;
      color: #000;
    }

    h1 {
      font-size: 50px;
      font-weight: bold;
    }

    p {
      font-size: 20px;
      font-weight: normal;
    }

    .comic-amp-font-loading {
      color: #00f;
    }

    .comic-amp-bold-font-loading .comic-amp-bold {
      color: #0ff;
    }

    .comic-amp-font-missing,
    .comic-amp-bold-font-missing .comic-amp-bold {
      color: #f00;
    }
  </style>
  <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
  <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 src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body class="comic-amp-font-loading comic-amp-bold-font-loading">

 <h1> Lorem Ipsum </h1>

  <h2 class="comic-amp-bold">amp-font</h2>

  <p>
    "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
    "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."
  </p>
  <p class="comic-amp-bold">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida ipsum vel hendrerit ultricies. Sed bibendum erat sit amet dui mattis imperdiet. Duis feugiat lobortis neque nec accumsan. Nam lacinia placerat enim in cursus. Sed id gravida arcu, sed condimentum mauris. Vestibulum convallis risus ut est ultrices mollis. Curabitur sit amet lorem et leo maximus consectetur non aliquet risus. Pellentesque tempus malesuada eros quis convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor risus, convallis eget bibendum at, auctor vel enim. Phasellus posuere dictum fermentum.
  </p>
  <p>
    Quisque ultricies id augue a convallis. Vivamus euismod est quis tellus laoreet lacinia. In quam tellus, mollis nec porta eget, volutpat sit amet nibh. Duis ac odio sem. Sed consequat, ante gravida fringilla suscipit, libero libero ullamcorper metus, nec porta est elit at est. Curabitur vel diam ligula. Nulla bibendum malesuada odio.
  </p>
  <p class="comic-amp-bold">
    Pellentesque ultricies quam diam, sit amet sollicitudin ante imperdiet a. Pellentesque porta semper nisi, et lobortis est laoreet ac. Vivamus pulvinar egestas purus, vitae pharetra nisl mattis at. Duis gravida ac quam vel commodo. Pellentesque dignissim luctus magna, a fermentum ligula porttitor non. Duis sodales interdum urna, eu viverra elit dapibus vitae. Sed aliquet magna non erat suscipit, vel elementum nisl lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu tempor purus. Cras non libero vehicula, finibus arcu eget, eleifend nulla. Vestibulum non sollicitudin turpis. Fusce condimentum posuere risus nec congue. Curabitur aliquam lorem dolor.
  </p>
  <p>
    Sed mollis, justo ac volutpat gravida, nisl eros imperdiet massa, sed aliquam nulla odio in urna. Pellentesque eros urna, rutrum vel luctus id, ultrices a libero. Morbi ante justo, gravida et velit at, convallis tristique metus. Nam elementum luctus facilisis. Vestibulum nec augue dignissim, gravida odio nec, volutpat libero. Cras vitae sagittis tellus, sed tincidunt ipsum. Maecenas et mauris id nunc porttitor tempus sit amet at libero.
  </p>
  <p class="comic-amp-bold">
    Aenean ullamcorper risus quam, molestie sodales lacus volutpat at. Nunc vulputate est ut faucibus faucibus. Proin posuere viverra vestibulum. Vestibulum pretium nunc ut euismod sollicitudin. Etiam ornare posuere libero. Vestibulum urna massa, viverra sed ullamcorper ac, hendrerit sed dui. Vestibulum interdum lectus tellus, ut consequat quam pulvinar vitae. Mauris porttitor nulla porta urna convallis accumsan. Curabitur eget ante in libero fringilla elementum. Curabitur tempus arcu massa, gravida tristique erat convallis vitae. Sed lacinia elit justo, eget mollis dui vehicula sit amet. Nunc dignissim condimentum nunc, id pulvinar purus mattis ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia nibh ac enim laoreet imperdiet.
  </p>

  <amp-font
    layout="nodisplay"
    font-family="Comic AMP"
    timeout="2000"
    on-error-remove-class="comic-amp-font-loading"
    on-error-add-class="comic-amp-font-missing"
    on-load-remove-class="comic-amp-font-loading"
    on-load-add-class="comic-amp-font-loaded">
  </amp-font>
  <amp-font
    layout="nodisplay"
    font-family="Comic AMP Bold"
    timeout="3000"
    font-weight="bold"
    on-error-remove-class="comic-amp-bold-font-loading"
    on-error-add-class="comic-amp-bold-font-missing"
    on-load-remove-class="comic-amp-bold-font-loading"
    on-load-add-class="comic-amp-bold-font-loaded">
  </amp-font>
</body>
</html>