CSS外部字體：什麼是正確的語法？

所有我搜索的文件說，正確的語法來加載CSS外部字體文件如下：CSS外部字體：什麼是正確的語法？

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

（提供一個在所有上述格式的字體，當然，這是我做的）。

但是，上述語法在Safari 5.0.2或Firefox 9中不適用於我：字體根本無法加載。另一方面，當我嘗試這麼做時：

@font-face { 
font-family: 'Josefin Sans'; 
src: url('JosefinSans-Regular.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; 
}

字體確實會被加載和顯示。（我沒有可用的IE來測試）。

怎麼了？我應該提到，我最初只有TTF文件（我在第二個示例中加載的文件），並且使用Fontsquirrel生成了其他版本（不加載的版本）。

編輯：檢查我的Apache日誌，我看到瀏覽器肯定拉字體（因此，他們在正確的位置）。 Firefox只是在第二種情況下加載TTF字體（正如人們所期望的那樣），而在第一種情況下，它只加載EOT字體（代碼中的第一個字體），而不是其他字體。 OTOH，Safari加載TTF，但在第一種情況下似乎沒有加載任何東西。我沒有看到與日誌中的字體相關的任何404錯誤。

來源

2012-01-03 PaulJ

確保您將所有文件放在正確的位置。 – BoltClock 2012-01-03 02:40:48

-1

您是否嘗試過：http://www.fontsquirrel.com/爲您生成代碼？我會感到驚訝，如果他們做錯了:)

來源

2012-01-03 02:50:42

你看過這個問題嗎？他說第一個片段是由Font Squirrel生成的。 – BoltClock 2012-01-03 02:52:10

哎呦 - 猜我最後錯過了。但是 - 就像它說的那樣，我懷疑他們是否做錯了。 – 2012-01-03 03:28:02

-1

在http://www.google.com/webfonts他們在外部加載它是這樣的：

<link href='http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

，然後你就是FONT-FAMILY：「Didact哥特式」，無襯線;你需要它的地方！我從來沒有使用fontsquirrel，但也許是這樣的？

而且如果.css文件中的URL加載它們，檢查路徑是否正確

來源

2012-01-03 02:56:16 Alex

OK，我似乎找到了解決辦法。問題是我的CSS代碼缺少一種字體格式，.OTF（OpenType）。我添加了以下行：

 url('fonts/JosefinSans-light.otf') format('opentype'),

Safari和Firefox都識別字體。

現在：問題當然是，我之前沒有添加OpenType字體，因爲Fontsquirrel並沒有爲我生成它;這是唯一缺少的格式。我不得不拿出另一個OTF文件，將其重命名爲「JosefinSans-light.otf」並將其放在適當的位置，以便對其進行測試。所以現在的問題就變成了：我怎樣才能從TTF，EOT ...生成一個OTF字體文件？或者這是不必要的，我只是落後於時代？（我應該提到，我仍然在Mac OS X 10.5.8上，並且沒有任何其他計算機可以對此進行測試）。

來源

2012-01-03 10:56:17 PaulJ

CSS外部字體：什麼是正確的語法？

回答

相關問題