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声明，因为此语法的目的是，明确，指定浏览器必须使用哪个单字体资源你在实际的页面CSS中指定了font- {family，weight，style，etc}的某种组合。

指定字体集使这变得不可能：没有语法指定您需要的集合中的哪个字体，因此设计不支持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;
  ...
}

Answer 2

请在此处阅读CSS Import Fonts。

简而言之，您需要将字体转换为浏览器可以使用https://www.fontsquirrel.com/tools/webfont-generator等工具理解的类型。

Css font-face使用ttc文件

2 个答案: