Css font-face使用ttc文件

Question

这是我第一次使用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>

是否有任何延迟加载或类似的东西？

Answer 1

您不能将字体集用于CSS @font-face声明,因为此语法的目的是明确指定当您指定font- {family,weight,style,etc}的某种组合时浏览器必须使用哪个单字体资源.你的实际页面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-Bold.woff') format('WOFF');
}

...

h1 {
  font-family: myfont;
  font-weight: bold;
  ...
}

p {
  font-family: myfont;
  font-weight: normal;
  ...
}