字體不呈現？

我有下面的CSS（按n SASS生成）：字體不呈現？

@font-face { 
    font-family: "locust"; 
    src: url(/assets/LOCUST.TTF) format("truetype"); 
    src: url(/assets/LOCUST.svg) format("svg"); }

的路徑似乎訪問 - 我在localhost:3000並通過鍵入localhost:3000/assets/LOCUST.TTF，例如，如果我可以下載/看字體。

但是火狐不會使字體：

<h1 style="font-family: locust;">Test</h1>

我使用Rails，但我不認爲這個問題是相關的，因爲生成的HTML和CSS似乎是正確的我，和字體是可訪問的。如果我知道我需要產生什麼，我很可能會知道如何解決。

來源

2014-03-06 fotanus

嘗試爲FF獲取WOFF字體。 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face – Kooki3

資產URL

這裏的代碼中，我們使用：

#app/assets/stylesheets/fonts.css.scss 
@font-face { 
    font-family: 'Lato'; 
    src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot'); 
    src: asset_url('layout/fonts/lato/lato-hairline-webfont.eot?#iefix') format('embedded-opentype'), 
     asset_url('layout/fonts/lato/lato-hairline-webfont.woff') format('woff'), 
     asset_url('layout/fonts/lato/lato-hairline-webfont.ttf') format('truetype'), 
     asset_url('layout/fonts/lato/lato-hairline-webfont.svg#latohairline') format('svg'); 
    font-weight: 100; 
    font-style: normal; 
}

通知asset_url使用 - 這提供給URL（所以爲什麼你不能夠在CSS兼容的路徑訪問路徑）

網絡字體

如果你有使用的字體充分的權利，你最好在這裏使用web字體生成器：http://www.fontsquirrel.com/tools/webfont-generator

這將創建跨瀏覽器的web字體文件.tff，.woff，.svg和.eot格式

來源

2014-03-06 10:20:00

字體不呈現？

回答

相關問題