在 css (otf) 中指定自定义字体 - 提供多个 otf 文件时如何指定粗体/斜体/等？答案

【问题标题】：specifying a custom font in css (otf) - How to specify bold/italic/etc when provided multiple otf files?在 css (otf) 中指定自定义字体 - 提供多个 otf 文件时如何指定粗体/斜体/等？
【发布时间】：2021-01-21 23:20:31
【问题描述】：

我有点不清楚在我目前的情况下如何使用@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>标签时？

【问题讨论】：

标签： css font-face

【解决方案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;
}

【讨论】：

没问题！ ;))