在 css 中指定自定义字体 (otf) - 如何在提供多个 otf 文件时指定 bold/italic/etc？

Question

我不太清楚在我目前的情况下如何使用@font-face。客户给我提供了FontName-Black.otf、FontName-BlackItalic.otf、FontName-Bold.otf、FontName-BoldItalic.otf等几个字体文件

我知道我通常会执行以下操作：

@font-face {
    font-family: FontName;
    src("path/FontName.otf") format("opentype")
}

我是否必须指定所提供的每一种字体名称？ css 如何知道哪种字体是默认字体以及将哪种字体应用于粗体（使用 <strong> 标签时）或斜体（使用 <em> 标签时？

Answer 1

您可以使用多个 @font-face ，如下所示：

@font-face {
  font-family: "FontName";
  src: url("FontName-Black.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FontName";
  src: url("FontName-BlackItalic.otf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "FontName";
  src: url("FontName-Bold.otf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

然后指定只使用这个：

body { font-family:"FontName", //you can add the exact fonts you want to use here }

h1 { font-weight:bold; }

p { font-style:italic; }

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

在 css 中指定自定义字体 (otf) - 如何在提供多个 otf 文件时指定 bold/italic/etc？

specifying a custom font in css (otf) - How to specify bold/italic/etc when provided multiple otf files?

css

font-face