gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 14:40:24 25 4
gpt4 key购买 nike

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

最佳答案

你的@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-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 - 将相同字体的不同字体文件连接到对应的CSS样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20125758/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com