html – 使用多种样式的@ font-face

2023年3月28日 221次阅读

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

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

我想使用@ font-face CSS声明在“Droid Serif”字体系列下导入所有这些样式,并使用font-weight属性指定我是否需要粗体和/或斜体,而不必导入他们每个人都在不同的字体系列下单独使用：

@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');
}

这可能吗？

附：我尝试了每种Google网络字体的导入技术,但它们都不适用于IE 9.

最佳答案 本文有助于解释@fontface的防弹使用.读下来,你会找到一些帮助IE的东西.

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

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

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

点赞