2

我有一个 HTML 页面，其中包含使用 CSS 定义的各种font-styles，如、normal、bold等。我想为每个 使用单独的字体，比如for ，for等。我使用导入字体，比如，italicsobliquefont-stylemyboldfontboldmyitalicsfontitalics@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正文中所有 s 的样式吗？我的意思是如果我分配font-style: italic或分配font-weight: bold给一个元素，会使用斜体字体还是粗体字体？或者我应该怎么做才能实现这一点，这样如果我使用font-weight: bold任何元素，myboldfont.woff都应该使用。

4

2 回答 2

4

这应该有效：

@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，但您将更改不同的属性。

于 2013-03-28T05:36:08.243 回答
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 规则中指定字体系列名称。但这可以被认为是目前广泛的跨浏览器支持必须付出的代价。

于 2013-03-28T07:37:37.670 回答