Css 使用 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

阅读这里。

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

Answer 2

您不能将字体集合用于 CSS @font-face 声明，因为此语法的目的是 明确地 指定哪个单一字体资源当您在实际页面 CSS.

中指定某些特定字体组合时，浏览器必须使用该字体-{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-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 */
  ...
}

Css 使用 ttc 文件的字体

Css font-face using ttc file

css

fonts

font-face

webfonts