@fontface適用於Mac/iPhone/iPad的Quicksand Light

Question

我已經安裝了webkit Quicksand Light並預訂到了我的CSS文件，但它在PC上的所有瀏覽器中都能正常工作，但是當我在任何瀏覽器的流沙中在MAC上查看它時輕的網頁字體不會正確顯示出來，就像是一種新的羅馬字體。它不拾取字體嗎？或者它只是不渲染？

找不到任何解決這個問題，一直在一整天試圖修復它

CSS：

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

} 

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

} 

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

} 

CSS的QuicksandBook;

body 
{ 
font:13px/24px 'QuicksandBook', Arial,sans-serif; 
font-weight: normal; 
} 

這些已經在頭部被引用。

Answer 1

不幸的是，我沒有可用的Mac測試，但這裏列出的一些指針可能值得一試。讓我們知道您的身體情況如何！

http://paulirish.com/2010/font-face-gotchas/#smiley

Answer 2

我通常加載所有的我的字體的在我的CSS的最高層 - 我不知道這是否有差別。

而且以供將來參考，你可以做你的字體是這樣的：

@font-face { 
font-family: 'Quicksand'; 
src: url('/assets/fonts/Quicksand_Light-webfont.eot'); 
src: url('/assets/fonts/Quicksand_Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('/assets/fonts/Quicksand_Light-webfont.woff') format('woff'), 
    url('/assets/fonts/Quicksand_Light-webfont.ttf') format('truetype'), 
    url('/assets/fonts/Quicksand_Light-webfont.svg#QuicksandLight') format('svg'); 
    /*url('/assets/fonts/Quicksand_Light.otf');*/ 
font-weight: lighter; 
font-style: normal; 

} 

@font-face { 
font-family: 'Quicksand'; 
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot'); 
src: url('/assets/fonts/Quicksand_Light_Oblique-webfont.eot?#iefix') format('embedded-opentype'), 
    url('/assets/fonts/Quicksand_Light_Oblique-webfont.woff') format('woff'), 
    url('/assets/fonts/Quicksand_Light_Oblique-webfont.ttf') format('truetype'), 
    url('/assets/fonts/Quicksand_Light_Oblique-webfont.svg#QuicksandLightOblique') format('svg'); 
font-weight: lighter; 
font-style: italic; 

} 

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

} 

這意味着你可以參考字體粗細在你的CSS，而不是設置字體爲斜。例如

body 
{ 
font: italic lighter 13px/24px 'Quicksand', Arial,sans-serif; 
} 

，將打印字體斜體在風格打火機