使用 ttc 文件的 Css 字体

Posted 2023-02-19

【中文标题】使用 ttc 文件的 Css 字体

【英文标题】：Css font-face using ttc file

【发布时间】：2018-08-15 00:47:19

【问题描述】：

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

加载是否有延迟或类似情况？

【问题讨论】：

你在字体声明之前忘记了@import

【参考方案1】：

您不能将字体集合用于 CSS @font-face 声明，因为此语法的目的是明确指定浏览器必须在指定某些字体资源时使用哪个单一字体资源具体的字体-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-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 */
  ...

【讨论】：

如果font-weight: bold 真的使用that-font-I-like-Regular.woff，那么解释一下为什么会很好。如有错别字请指正。

因此更正。

【参考方案2】：

在这里阅读CSS Import Fonts。

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