您可以在单个 @font-face 查询中定义多个字体粗细吗？-css教程-PHP中文网

您可以在单个 @font-face 查询中定义多个字体粗细吗？

Susan Sarandon

发布： 2024-11-24 05:06:14

原创

621 人浏览过

Can You Define Multiple Font Weights in a Single @font-face Query?

可以使用单个 @font-face 查询定义多个字体粗细吗？

Klavika 字体有各种粗细和形状。可以使用指定粗细的单个 @font-face 查询将这些导入到 CSS 中吗？

解决方案：

引入 @font-face 的多功能功能，您可以可以将不同的样式和粗细与单个字体系列名称相关联：

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

登录后复制

您现在可以指定 font-weight:bold 或font-style:italic 对于不同的元素：

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

登录后复制

有关此功能的全面详细信息，请参阅官方文档。

示例：

[示例笔](https://codepen.io/anon/pen/EjxVqv)

以上是您可以在单个 @font-face 查询中定义多个字体粗细吗？的详细内容。更多信息请关注PHP中文网其他相关文章！