logo标签列表

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

cssfonts
3
在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');}
2个回答
6

您的@font-face声明都是相同的。为了在css中使用这些声明，您需要将它们分别设置为不同的(LinotypeDidoteTextPro-normal、LinotypeDidoteTextPro-bold-italic、LinotypeDidoteTextPro-italic、LinotypeDidoteTextPro-bold)。此外，使用类如“bold”和“italic”而不是元素如“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; }
“在CSS中调用它们”是什么意思？记住，HTML代码仅包含b标签和i标签。以某种方式，这些b和i标签必须调用不同的字体文件。 - drake035
有人能告诉我为什么这会被踩吗？它运行良好且正确！ - DrCord
我给它投了反对票，因为你没有正确声明字体。你的语法没问题，除了你应该在声明font-xyx时一起声明字体...所以当你声明italic时，你应该设置font-style:italic。我不太敢说“应该”...在我看来，这是调用字体的正确方式，并且你应该注意到跨浏览器呈现的可见差异。 - albert
我从未见过在“@font-face”声明中使用这些内容，如果您查看资源，它们清楚地是设置“@font-face”的标准，其中没有一个提到或显示将这些内容放入实际调用中。http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ 使用实际字体重量或样式的字体的整个目的是不必强制浏览器呈现它们。在进行负面评价之前，您真的需要做好研究，特别是如果负面评价是基于您的观点！ - DrCord
DrCord：就像我之前所说的，我的用户只需在文本编辑器中单击粗体按钮和斜体按钮，因此HTML不会包含任何类，只有b标签和i标签。我希望在b标签和i标签之间显示的文本使用相应的字体文件。 - drake035
显示剩余2条评论
1
你很接近了，只需要清理一下语法：这是我声明Open Sans常规字体和粗体的方法:

@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声明编写代码，更换文件链接和字体重量/字体样式/字体-(等)，并确保这在文档中的第一个样式表顶部声明。您可以在此处查看整个内容：http://dev.bowdenweb.com/a/css/sandbox01.css
此外，我使用fontsquirrel来生成不同的字体文件格式。
这不是正确的做法，你不应该在@font-face声明中声明字体的样式和粗细。 - DrCord
你看过那些声明在做什么吗？注意它们有相同的字体名称，但它们是不同的字体。它们确实需要字体特征（重量/样式/倾斜等）。 - albert
根据您的使用情况，最好不要重置/重新声明不必要的样式，这对于渲染、WPO等方面都更好。我向您保证，这篇文章非常有用：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/ - albert
np...其实很高兴你坚持下来了，没有放弃。很多用户都会这样做...我们在这里不是为了争吵，而是为了学习。我们在这里经常犯错。 ;) - albert
1
我修改了我的答案，以包含更多信息，帮助那些可能只看标记为正确的答案的用户。 - DrCord
显示剩余5条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接