Question

我目前停留在AMP网站上。我有一个仅用于我的AMP网站的CSS文件，我为此设置了下面的字体。我必须使用类似的方法，因为我需要从我的资产文件夹访问那些字体文件。

我正在使用Rails 5

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src:font-url('poppins-v5-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Poppins Regular'), local('Poppins-Regular'),
    font-url('poppins-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    font-url('poppins-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    font-url('poppins-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
    font-url('poppins-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    font-url('poppins-v5-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src:font-url('poppins-v5-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Poppins Bold'), local('Poppins-Bold'),
    font-url('poppins-v5-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    font-url('poppins-v5-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    font-url('poppins-v5-latin-700.woff') format('woff'), /* Modern Browsers */
    font-url('poppins-v5-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    font-url('poppins-v5-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}

最诚挚的问候！

Answer 1

通过@ font-face包含的字体必须通过HTTP或HTTPS方案来获取。来源：https://www.ampproject.org/docs/design/responsive/custom_fonts

Answer 2

通过@ font-face（无限制，允许所有字体），您应使用完整路径。

例如：http://somedomain.org/VeraSeBd.ttf或https://somedomain.org/VeraSeBd.ttf

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

通过@ font-face包含的字体必须通过HTTP或HTTPS方案获取。

AMP字体无法正常工作

2 个答案: