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

问题中列出的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名称。但这可以被认为是目前广泛的跨浏览器支持必须付出的代价。