不能使用@ font-face和Font Squirrel轉換

Question

我一直在嘗試在我的網頁上添加自己的字體，但我仍然不知道如何使用Font Squirrel對話。 我下載了一個免費的.ttf字體，並用生成器轉換它，如下所示：

@font-face 
{
font-family: 'AbiteRegular';
src: url('fonts/abite-webfont.eot');
src: url('fonts/abite-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/abite-webfont.woff') format('woff'),
     url('fonts/abite-webfont.ttf') format('truetype'),
     url('fonts/abite-webfont.svg#AbiteRegular') format('svg');
font-weight: normal;
font-style: normal;
}

is the folder where I keep my .ttf files converted. 其中是我保存.ttf文件的文件夾。 我這樣使用它：

body 
{
font-family: 'AbiteRegular';
}

所有這些配置都在.css文件中。 但是正文忽略了這一點。 你知道為什么會這樣嗎？

Answer 1

你的字體URL可能有問題

url('fonts/abite-webfont.eot');...

或者您使用的瀏覽器不支持動態字體。

Answer 2

你有沒有在其他瀏覽器中查看？ 檢查IE，Firefox，Chrome。 如果甚至沒有一個瀏覽器顯示字體，那么您的文件夾結構可能是錯誤的。

你有這樣的文件夾結構嗎？ 包含@font-face聲明（比如font.css ）的css文件應放置在旁邊有一個文件夾，名為fonts ，字體文件應該在該文件夾中。

/font.css
/fonts/abite-webfont.eot
/fonts/abite-webfont.woff
/fonts/abite-webfont.ttf
/fonts/abite-webfont.svg

這應該適用於所有瀏覽器，包括IE 6，IE 7和IE 8.只需確保路徑正確。 而且， body聲明應該在font.css聲明之后，即font.css應該包含在任何樣式之前。

希望這可以幫助！ :)