Question

在myfonts.com上我购买了Didot font，其中包含常规，粗体，斜体和粗体斜体（每种样式都有一个单独的文件）。

当我的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-style和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; }

Answer 2

你很接近，你只需要清理你的语法：这就是我如何为font-weights声明open sans：regular和bold：


@font-face{font-family:"open_sansregular";
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot");
src:url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.eot?#iefix") format("embedded-opentype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.woff") format("woff"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.ttf") format("truetype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/open-sans-regular.svg#open_sansregular") format("svg");
font-weight:normal; font-style:normal}

@font-face{font-family:"open_sansregular";
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot");
src: url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.eot?#iefix") format("embedded-opentype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.woff") format("woff"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.ttf") format("truetype"),
 url("http://dev.bowdenweb.com/a/fonts/sans-serif/open-sans/bold/open-sans-bold.svg#open_sansbold") format("svg");
font-weight:bold; font-style:normal}

继续使用@ font-face声明的其余代码，交换文件网址和font-weight / font-style / font-（等），并确保在您的第一个样式表的顶部声明文献。你可以在这里看到整件事：http://dev.bowdenweb.com/a/css/sandbox01.css
另外，我使用fontsquirrel生成不同的字体文件格式。

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

2 个答案: