将相同字体的不同字体文件连接到相应的CSS样式

Question

在myfonts.com上我购买了Didot字体,它有常规,粗体,斜体和粗体斜体(每种样式都有一个单独的文件).

当我的WordPress用户使用粗体和斜体字符撰写文章时,我希望使用相应的字体样式.

但到目前为止,它总是使用常规字体,即使是斜体或粗体.因此,我在我的网站上看到的斜体似乎是我常规字体的"斜体版本".但是这个结果与myfonts.com上宣传的真实斜体不同.

他们的客户服务无法用他们自己的话来帮助解决这些"发展问题".如何在我的WordPress网站上为每种样式使用正确的字体文件？

以下是myfonts.com提供的CSS中添加的代码:

@import url("//hello.myfonts.net/count/xxxxx");

@font-face {font-family: 'LinotypeDidoteTextPro';font-weight: normal;font-style: normal;src: url('webfonts/xxxxxxx1.eot');src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro';font-weight: bold;font-style: italic;src: url('webfonts/xxxxxxx2.eot');src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro';font-weight: normal;font-style: italic;src: url('webfonts/xxxxxxx3.eot');src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro';font-weight: bold;font-style: normal;src: url('webfonts/xxxxxxx4.eot');src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');}

Answer 1

你的@ font-face声明都是一样的.你需要它们各自不同(LinotypeDidoteTextPro-normal,LinotypeDidoteTextPro-bold-italic,LinotypeDidoteTextPro-italic,LinotypeDidoteTextPro-bold)以便在你的css中使用声明.同时使用"粗体"和"斜体"等类而不是像"b"和"i"这样的元素允许您正确使用粗体斜体字体,否则您必须选择使用哪一个.

CSS文件应该是:

@font-face {font-family: 'LinotypeDidoteTextPro-normal'; src: url('webfonts/xxxxxxx1.eot');src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro-bold-italic'; src: url('webfonts/xxxxxxx2.eot');src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro-italic'; src: url('webfonts/xxxxxxx3.eot');src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');}

@font-face {font-family: 'LinotypeDidoteTextPro-bold'; src: url('webfonts/xxxxxxx4.eot');src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');}

body{
    font-family: "LinotypeDidoteTextPro-normal";
    font-weight: normal;
    font-style: normal;    
}
i,
.italic{
    font-family: "LinotypeDidoteTextPro-italic";   
}
b,
.bold{
    font-family: "LinotypeDidoteTextPro-bold";   
}
b i,
i b,
.bold.italic{
    font-family: "LinotypeDidoteTextPro-bold-italic";    
}

正如@Albert所指出的那样(参考:http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/ )你可以更好地使用浏览器,并且如果你使用字体样式则被强制覆盖更少和font-face声明中的font-weight.所以优化版本将是:

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx1.eot');
    src: url('webfonts/xxxxxxx1.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx1.woff') format('woff'),url('webfonts/xxxxxxx1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx2.eot');
    src: url('webfonts/xxxxxxx2.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx2.woff') format('woff'),url('webfonts/xxxxxxx2.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;}

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx3.eot');
    src: url('webfonts/xxxxxxx3.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx3.woff') format('woff'),url('webfonts/xxxxxxx3.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;}

@font-face {
    font-family: 'LinotypeDidoteTextPro';
    src: url('webfonts/xxxxxxx4.eot');
    src: url('webfonts/xxxxxxx4.eot?#iefix') format('embedded-opentype'),url('webfonts/xxxxxxx.woff') format('woff'),url('webfonts/xxxxxxx4.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;}

body{
    font-family: "LinotypeDidoteTextPro";
    font-weight: normal;
    font-style: normal;    
}
i, .italic{ font-style: italic; }
b, .bold{ font-weight: bold; }