css - @font-face 在网站上显示不正确

Question

我有一个 myshopify 网站，我正在尝试使用 @font-face 来显示字体。但由于某种原因，字体没有生效。这就是我所拥有的:

资源文件夹中的字体文件

在 css 中使用 myshopify Assets url:

  @font-face {
    font-family: 'LeagueGothicRegular';
    src: url('{{ 'League_Gothic-webfont.eot' | asset_url }}');
    src: url('{{ 'League_Gothic-webfont.eot?iefix' | asset_url }}') format('embedded-opentype'),
    url({{ 'League_Gothic-webfont.woff' | asset_url }}) format('woff'),
    url('{{ 'League_Gothic-webfont.ttf' | asset_url }}') format('truetype'),
    url('{{ 'League_Gothic-webfont.svg#LeagueGothicRegular' | asset_url }}') format('svg');
    font-weight: normal;
    font-style: normal;
}


..

#top-menu a{
    font-family: 'LeagueGothicRegular', sans-serif;
    background-color: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #000000;
    display: inline-block;
    font-size: 1.97em;
    line-height: 1;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  padding: 6px 18px;
  padding-top: 8px;
  text-decoration: none
}

有什么弹出来吗？谢谢!

Answer 1

我找到了一个 similar SO question关于在 Shopify 中使用字体，这似乎表明您需要在 css url 中使用 asset_url 过滤器的任何地方删除外部引号(这是相反的我在原始答案中建议的内容):

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url({{ 'League_Gothic-webfont.eot' | asset_url }});
    src: url({{ 'League_Gothic-webfont.eot?iefix' | asset_url }}) format('embedded-opentype'),
         url({{ 'League_Gothic-webfont.woff' | asset_url }}) format('woff'),
         url({{ 'League_Gothic-webfont.ttf' | asset_url }}) format('truetype'),
         url({{ 'League_Gothic-webfont.svg#LeagueGothicRegular' | asset_url }}) format('svg');
    font-weight: normal;
    font-style: normal;
}

asset_url documentation page 似乎证实了这一点(靠近底部)。

根据其他question ，您可能还需要修改包含字体的文件夹的 htaccess。