@ font-face不顯示MAC（Chrome/Safari）上的塊項目

我遇到的問題是在Mac上的Safari和Chrome中使用嵌入字體格式化任何塊元素。對於所有的Windows瀏覽器（IE，Firefox，Chrome甚至Safari），格式都是正確的，並且正確顯示內嵌元素的字體。我已經剝離了HTML只是以下基礎知識，仍然有這個問題 - 我錯過了什麼？@ font-face不顯示MAC（Chrome/Safari）上的塊項目

@font-face { font-family: yowieFont; src: url(/template/GROBOLD.ttf); font-weight:normal; font-style:normal; font-variant:normal;} 
h1 { font-family: yowieFont; color: #ed2249;} 
h2 { font-family: yowieFont; color: #ed2249;} 
h3 { font-family: yowieFont; color: #ed2249;} 
p { font-family: yowieFont; color: #ed2249;} 
span { font-family: yowieFont; color: #ed2249;} 

<h1 style="display: inline;">1: CONTACT US</h1> 
<h1 >1: CONTACT US</h1> 
<h2 >2: CONTACT US</h2> 
<h3 >3: CONTACT US</h3> 
<p >P: CONTACT US</p> 
<span>span: CONTACT US</span>

來源

2014-03-31 SuperbStarling

您錯過了其他字體文件。你需要.svg，.eot，.woff和.ttf。 – drip

@drip再次閱讀問題。 OP表示，它對跨度工作正常，但不適用於其他元件。 –

我原本以爲問題出在字體上，但是因爲它顯示的是內聯元素，所以我不明白爲什麼。然而，通過字體鬆散工具的字體確實解決了這個問題 http://www.fontsquirrel.com/tools/webfont-generator – SuperbStarling

我通過字體松鼠工具運行的字體解決此問題： fontsquirrel.com/tools/webfont-generator

工具生成所需的不同的網絡格式和固定的行高問題我也有這種字體

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

來源

2014-04-01 16:24:30 SuperbStarling

@ font-face不顯示MAC（Chrome/Safari）上的塊項目

回答

相關問題