时间戳

首页 > 解决方案 > AMP：使用字体的自定义字体不起作用

font-face - AMP：使用字体的自定义字体不起作用

问题描述

我正在尝试在我的 AMP 页面中使用使用 font-face 的自定义字体，但该字体未呈现。控制台显示“图标的字体下载超时”。

@font-face {
  font-family: 'icons';
  src: url('/fonts/icos2/icomoon.ttf?126oo9') format('truetype');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
    content: "\e94e";
}
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

<amp-font layout="nodisplay"
  font-family="icons"
  timeout="2000"
  on-error-remove-class="icons-loading"
  on-error-add-class="icons-missing"
  on-load-remove-class="icons-loading"
  on-load-add-class="icons-loaded">
</amp-font>

<span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>

字体是通过 HTTPS 获取的。

任何帮助将不胜感激。

谢谢！

标签： font-faceamp-html

解决方案

这是工作网址

头上的 Js

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

头上的 CSS

<style amp-custom>
    h1 {
      color: red;
    }
    @font-face {
    font-family: 'icomoont';
    src: url(https://www.fanaticguitars.com/download/icomoon.ttf) format('truetype');
  }
    .font {font-family: 'icomoont'; color:#f00;}
    span {font-size:25px;}

    [class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoont';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-clock:before {
    content: "\e94e";
}
  </style>

HTML

  <span>Hello Font!</span>
  <br>
  <span class="font">Hello Font!</span>
  <br>

  <span class="icon-clock"></span>
<span class="ribbon-txt">Text</span>

推荐阅读