@fontface Quicksand Light Mac/iPhone/iPad 版

Question

我已经安装了 webkit Quicksand Light 并保存到我的 CSS 文件中，它在 PC 上的所有浏览器中都工作正常，但是当我在 MAC 上的任何浏览器中查看它时，流沙光 Web 字体无法正常显示，就像新罗马字体一样字体类型。是不是没有拾取字体？或者只是没有渲染？

找不到这个问题的任何解决方案，一整天都在尝试修复它

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

这将以较浅的斜体打印字体