CSS3 font-face ...如何制作font-style:italic使用实际的斜体版本?

时间:2012-05-14 11:51:56

标签: css css3 fonts font-face embedded-fonts

我有两种嵌入字体 - 常规和“真实”斜体版本......

@font-face {font-family: 'MyFont-Regular';src: url('wf/2061CF_2_0.eot');src: url('wf/2061CF_2_0.eot?#iefix') format('embedded-opentype'),url('wf/2061CF_2_0.woff') format('woff'),url('wf/2061CF_2_0.ttf') format('truetype');}
@font-face {font-family: 'MyFont-RegularItalic';src: url('wf/2061CF_6_0.eot');src: url('wf/2061CF_6_0.eot?#iefix') format('embedded-opentype'),url('wf/2061CF_6_0.woff') format('woff'),url('wf/2061CF_6_0.ttf') format('truetype'); font-style:italic, oblique;}

我在几个班级上使用斜体版本......

.MyFont-RegularItalic, .italic, em { font-family: MyFont-RegularItalic; }

我正在MyFont-Regular申请body我有一个元素div.example,我希望文字是斜体。

为了达到这个目的,我必须应用这个......

div.example {
    font-family:MyFont-RegularItalic;
}

这当然很好。但是,由于我已经将“常规”版本的字体应用到我的body,我想知道我是否能以某种方式让font-style:italic;为此工作。所以我不想再次应用整个font-family,而只是将其声明为斜体。

div.example {
    font-style:italic;
}

这不起作用并导致浏览器倾斜的斜体版本的“常规”字体 - 在这种情况下不使用真正的“斜体”字体。

当我将font-style:italc应用于元素时,如果可以使我的样式表自动使用字体的“真实”斜体版本,那么任何想法或技巧。

提前谢谢你, 马特

更新

Screenshot of the two cases

1 个答案:

答案 0 :(得分:3)

将样式添加到字体声明中。

@font-face {
  font-family:"MyFont";
  src:url("myfont.ttf");
}

@font-face {
  font-family:"MyFont";
  src:url("myfont-italic.ttf");
  font-style:italic;
}