css – 多个字体权重,一个@ font-face查询

前端之家收集整理的这篇文章主要介绍了css – 多个字体权重,一个@ font-face查询前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我必须导入Klavika字体,并且已经收到它的多种形状和大小:
Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

现在我想知道是否可以将它们导入到CSS中,只需一个@ font-face-query,我在这里定义查询中的权重。我想避免复制/粘贴查询8次。

所以这样的东西:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf),weight:normal;
  src: url(../fonts/Klavika-Bold.otf),weight:bold;
}

解决方法

实际上,@ font-face有一种特殊的味道,这将允许你所要求的。

以下是使用与不同字体相关联的不同样式和权重的相同字体系列名称的示例:

@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
 }
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}

您现在可以指定font-weight:bold或font-style:您喜欢的任何元素的斜体,而不必指定font-family或者重写font-weight和font-style。

body { font-family:"DroidSerif",Georgia,serif; }
h1 { font-weight:bold; }
em { font-style:italic; }
strong em {
font-weight:bold;
font-style:italic;
}

有关此功能和标准使用的全面概述,请查看this article.

EXAMPLE PEN

猜你在找的CSS相关文章