Question

Google网页字体中的Droid Serif字体具有以下样式：

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

我想使用@font-face CSS声明在“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');
}

这可能吗？

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

Answer 1

本文有助于解释@fontface的防弹使用。读下来，你会找到一些帮助IE的东西。

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

我个人使用font squirrel并引用各种文件类型以保持所有浏览器的快乐。我不确定你能做什么，只要我知道你做不到。

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

使用@ font-face和多种样式

1 个答案: