多个字体权重，一个@font-face 查询 [英] Multiple font-weights, one @font-face query

问题描述

我必须导入 Klavika 字体，但我收到了多种形状和大小的字体:

I have to import the Klavika font and I've received it in multiple shapes and sizes:

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

现在我想知道是否可以仅使用一个 @font-face-query 将它们导入 CSS，我在其中定义了 weight询问.我想避免复制/粘贴查询 8 次.

Now I would like to know if it's possible to import those into CSS with just one @font-face-query, where I'm defining the weight in the query. I want to avoid copy/pasting the query 8 times.

比如:

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

推荐答案

实际上，@font-face 有一种特殊的风格，可以满足您的要求.

Actually there is a special flavor of @font-face that will permit just what you're asking.

下面是一个示例，使用相同的字体系列名称，但不同的字体具有不同的样式和粗细:

Here's an example using the same font-family name with different styles and weights associated with different fonts:

@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:italic，而无需指定 font-family 或覆盖 font-weight 和 font-style.

---

You can now specify font-weight:bold or font-style:italic to any element you like without having to specify the font-family or overriding font-weight and font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

<小时>

有关此功能和标准用法的完整概述，请查看 这篇文章.

这篇关于多个字体权重，一个@font-face 查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！