Question

我正在尝试在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获取字体。

非常感谢任何帮助。

谢谢！

Answer 1

Here is working Url

Js on Head

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

AMP：使用font-face无法正常工作的自定义字体

1 个答案: