Question

我有一个HTML页面，其中包含font-style，normal，bold，italics等各种oblique，使用CSS定义。我想为每个font-style使用单独的字体，例如myboldfont bold，myitalicsfont italics等。我使用@font-face导入字体，比如，

@font-face {
    font-family: "MyNormal";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyBold";
    font-style: normal;
    font-weight: normal;
    src: url("myboldfont.woff") format("woff");
}
@font-face {
    font-family: "MyItalics";
    font-style: normal;
    font-weight: normal;
    src: url("myitalicsfont.woff") format("woff");
}
@font-face {
    font-family: "MyOblique";
    font-style: normal;
    font-weight: normal;
    src: url("myobliquefont.woff") format("woff");
}

导入普通，斜体，粗体和斜体字体。我将body样式定义为;

body{
  font-family: MyNormal, MyBold, MyItalics, MyOblique;
}

这足以定义正文中所有font-style的样式吗？我的意思是如果我将font-style: italic或font-weight: bold分配给一个元素，是否会使用斜体字体或粗体字体？或者我该怎么做才能实现这一目标，因此如果我对任何元素使用font-weight: bold，则应使用myboldfont.woff。

提前致谢... :)

Answer 1

这应该有效：

@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: bold;
    src: url("myboldfont.woff") format("woff");
}

而且：

...{
   font-family:"MyFont";
   font-weight:bold;
}...

然后，您将始终使用font-family的相同名称，但您可以更改不同的属性。

Answer 2

问题中列出的CSS是最安全的方法。当超过1个权重，或超过4个权重或样式链接到字体系列名称时，IE8会出现显示问题。为每种字体变体使用唯一的字体系列名称可以避免此问题。

如果为每个字体变体使用唯一的字体系列名称，则无需在@ font-face声明中或在使用该字体的HTML元素的CSS规则中标识重量或样式。

此外，为了支持最广泛的浏览器，请将.woff，.ttf和.eot组合用于嵌入字体。这是TypeKit使用的方法：

@font-face {
    font-family: 'MyNormal';
    src: url('mynormalfont.eot');
    src: url('mynormalfont.eot?#iefix')
            format('embedded-opentype'),
         url('mynormalfont.woff') format('woff'),
         url('mynormalfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyBold';
    src: url('myboldfont.eot');
    src: url('myboldfont.eot?#iefix')
            format('embedded-opentype'),
         url('myboldfont.woff') format('woff'),
         url('myboldfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyItalics';
    src: url('myitalicsfont.eot');
    src: url('myitalicsfont.eot?#iefix')
            format('embedded-opentype'),
         url('myitalicsfont.woff') format('woff'),
         url('myitalicsfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyOblique';
    src: url('myobliquefont.eot');
    src: url('myobliquefont.eot?#iefix')
            format('embedded-opentype'),
         url('myobliquefont.woff') format('woff'),
         url('myobliquefont.ttf') format('truetype');
}

字体变体的用法如下：

p {
    font-family: MyNormal, sans-serif;   /* Still useful to add fallback fonts */
    font-size: 12px;
}
h2 {
    font-family: MyBold, sans-serif;
    font-size: 20px;
}

缺点是必须在使用其中一种字体变体的每个CSS规则中指定font-family名称。但这可以被认为是目前广泛的跨浏览器支持必须付出的代价。

如何为每种字体样式定义单独的字体 - CSS

2 个答案: