使用 ttc 文件的 Css font-face

Question

使用 ttc 文件的 Css font-face

11

这是我第一次使用 font-face，对我来说确实很难真正渲染出完全相同的字体，特别是涉及到 *.ttc 文件时。

目前为止，我已经做了以下工作:

@font-face {
    font-family: 'FontName';
    src: url('../fonts/font.ttc') format('truetype');
    font-weight: normal;
}


.header {
    font-family: 'FontName;
}

当我在Chrome检查器的网络选项卡中检查时，我可以看到字体已经成功加载，但结果文本仍然使用另一种字体。

我做错了什么？请帮我解决这个问题。非常感谢您的帮助。

更新

我发现还有一件事。当我使用内联样式时，字体被正确渲染。

    <p style="font-family:'FontName'">test 2</p>

加载有延迟或类似情况吗？

- Tyler Bean

在 font-face 声明之前，您忘记了 @import。 - JoelBonetR

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike 'Pomax' Kamermans · Accepted Answer

在CSS @font-face声明中，您不能使用字体集合，因为这种语法的目的是要明确地指定浏览器在您的实际页面CSS中指定某些特定的字体-{族、重量、风格等}组合时必须使用哪个单一的字体资源。

指定字体集合将使这成为不可能：没有语法可以指定需要该集合中的哪种字体，因此ttc是没有设计支持的。提取您需要的单独字体资产（如果被授权！），然后显式说明您需要哪个单一字体适用于哪个单一的@font-face声明。

请记住，这是可能的：

@font-face {
  font-family: myfont;
  font-weight: normal;
  src: url('that-font-I-like-Regular.woff') format('WOFF');
}

@font-face {
  font-family: myfont;
  font-weight: bold;
  src: url('that-font-I-like-Regular.woff') format('WOFF');
}

...

:root {
  font-family: myfont;
}   

h1 {
  font-weight: normal; /* will use that-font-I-like-Regular.woff */
  ...
}

p {
  font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
  ...
}