使用具有多种样式的@font-face

Question

来自 Google 网络字体的 Droid Serif 字体具有以下样式：

DroidSerif.ttf
DroidSerif-Bold.ttf
DroidSerif-BoldItalic.ttf
DroidSerif-Italic.ttf

我想使用@font-faceCSS 声明在“Droid Serif”下导入所有这些样式，font-family并使用该font-weight属性来指定我是否想要粗体和/或斜体，而不必在不同的情况下分别导入它们font-family：

@font-face {
    font-family: 'Droid Serif';
    src: url('../fonts/DroidSerif.ttf');
}

@font-face {
    font-family: 'Droid Serif Bold';
    src: url('../fonts/DroidSerif-Bold.ttf');
}

@font-face {
    font-family: 'Droid Serif BoldItalic';
    src: url('../fonts/DroidSerif-BoldItalic.ttf');
}

@font-face {
    font-family: 'Droid Serif Italic';
    src: url('../fonts/DroidSerif-Italic.ttf');
}

这可能吗？

PS我已经尝试了每种谷歌网络字体的导入技术，但它们都不适用于IE 9。

Answer 1

本文有助于解释 @fontface 的防弹使用。往下读，您会发现一些对 IE 有帮助的东西。

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

我个人使用 squirrel 字体并引用各种文件类型，以使所有浏览器满意。我不确定你能做到你所要求的，据我所知你不能。

这也有助于解释 @fontface 的字体粗细 - 除非字体指定它具有一定的粗细，否则您将无法更改它。http://css-tricks.com/watch-your-font-weight/