@ font-face在網站上顯示不正確

我有一個myshopify網站，我試圖使用@font-face顯示字體..但由於某種原因，字體沒有生效..這裏是我的：@ font-face在網站上顯示不正確

使用myshopify資源網址在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; 
} 


.. 

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

來源

2013-04-01 user1833002

我發現了一個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_urldocumentation page（接近底部）確認。

根據其他question，您可能還需要修改包含字體的文件夾的htaccess。

來源

2013-04-01 21:58:09

謝謝..但唉，沒有解決它.. grrr – user1833002

您的CSS文件保存爲.liquid擴展名？根據[this]（http://ecommerce.shopify.com/c/ecommerce-design/t/css-disregards-liquid-tags-115513），Shipify可能需要知道解析文件。 –

是的，唉，這是.. – user1833002

我遇到了同樣的問題。

經過進一步的檢查，我的字體文件具有與其他主題文件不同的權限。我用chmod使它們像其他644一樣，然後重新上傳。像魅力一樣工作。

chmod 644 LeagueGoth*

並重新上傳。

來源

2014-04-26 19:57:03

@ font-face在網站上顯示不正確

回答

相關問題