Question

我有一个myshopify网站，我试图使用@font-face显示字体..但由于某种原因，字体没有生效..这就是我所拥有的：

资产文件夹中的字体文件

在css中使用myshopify资产网址：

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

突然出现了什么？ THANKYOU！

Answer 1

我发现了一个关于在Shopify中使用font-faces的similar SO question，这似乎表明你需要删除外部引号，无论你在哪里使用asset_url过滤器一个CSS网址（这与我在原始答案中建议的相反）：

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

Answer 2

我遇到了同样的问题。

进一步检查后，我的字体文件具有与其余主题文件不同的权限。我使用chmod像其他人一样制作644，然后重新上传。工作就像一个魅力。

chmod 644 LeagueGoth*

并重新上传。

@ font-face无法在网站中正确显示

2 个答案: