@fontface Quicksand for Mac/iPhone/iPad

Question

我已经安装了webkit Quicksand和书在我的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;

}

用于QuicksandBook的CSS；

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

这些已经在head部分被引用了。

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;
 }

它将以较轻的样式打印斜体字体