使用@字體面會導致不同的字符使用此代碼在Safari

Question

顯示

我添加了一個字型到我的網站：

@font-face { 
    font-family: 'ChunkFive-Roman'; 
    src: url('/css/font/ChunkFive-Roman.eot') format('eot'), 
     url('/css/font/ChunkFive-Roman.otf') format('opentype'), 
     url('/css/font/ChunkFive-Roman.woff') format('woff'), 
     url('/css/font/ChunkFive-Roman.ttf') format('truetype'), 
     url('/css/font/ChunkFive-Roman.svg#ChunkFive-Roman') format('svg'); 
} 

這工作好於XP在所有的瀏覽器Safari的除外：

爲什麼會這樣，更重要的是，我該如何解決這個問題？

這些字體可用here。

Answer 1

發現在這個問題上的一篇文章：WEBKIT (SAFARI 3.1) AND THE CSS @FONT-FACE DECLARATION

爲@字體面CSS規範部分是非常具體 - 字體是基於一個寬陣列放置在@字體面聲明塊標準上要被選擇本身。可以在@ font-face聲明中定義各種文本CSS屬性，然後在CSS中稍後涉及字體時檢查它們。例如，如果我爲Diavlo系列有兩個@ font-face聲明 - 一個用於常規文本，另一個用於較重加權版本的字體 - 那麼我稍後將在Diavlo中使用font-family：屬性，它應該參考在第一個@ font-face中定義的基本Diavlo字體。但是，如果我要做同樣的事情，但也要指定較重的字體重量:,那麼它應該使用較重版本的Diavlo。爲了把這個例子代碼：

@font-face { 
    font-family: 'Diavlo'; 
    src: url(./Diavlo/Diavlo_Book.otf) format("opentype"); 
} 

@font-face { 
    font-family: 'Diavlo'; 
    font-weight: 900; 
    src: url(./Diavlo/Diavlo_Black.otf) format("opentype"); 
} 

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Diavlo'; 
    font-weight: 900; 
} 

div#content { 
    font-family: 'Diavlo'; 
} 

正如你看到的，我的標題應該使用Diavlo_Black.otf定義的字體，而我的身體含量應使用Diavlo_Book.otf。但是，在WebKit中，這不起作用 - 它完全忽略了font-family：和src：在@ font-face聲明中的任何屬性！完全忽略它們！不僅如此 - 不僅如此 - 它忽略了給定的font-family：attribute字符串的最後一個@ font-face！

這裏的含義是，要使@ font-face像WebKit（以及Safari 3.1）中那樣工作，我必須聲明完全虛構的，不存在的類型族來滿足WebKit。這裏是我在當前使用的地方使用的方法@ font-face：

@font-face { 
    font-family: 'Diavlo Book'; 
    src: url(./Diavlo/Diavlo_Book.otf) format("opentype"); 
} 

@font-face { 
    font-family: 'Diavlo Black'; 
    src: url(./Diavlo/Diavlo_Black.otf) format("opentype"); 
} 

h1, h2, h3, h4, h5, h6 { 
    font-family: 'Diavlo Black'; 
} 

div#content { 
    font-family: 'Diavlo Book'; 
}