html - 通过 CSS 导入字体问题

Question

我目前正在尝试使用 @font-face CSS 元素导入字体，但它无法正常工作/无法显示。它是来自 Dafont.com 的 Francaise 字体，它位于带有样式表的 css 文件夹中，但不会将我的标题字体更改为所需的字体。

我已经尝试在 Stack 中搜索类似的查询，但每次尝试都是徒劳的。

@font-face {
    font-family: 'Francaise';
    src: local('Francaise Regular Demo.ttf') format('truetype');
}

我预计我的标题文本是上述字体，但它只显示为后备字体，草书 Comic Sans。

Answer 1

您必须使用 @font-face url 而不添加空格。只需重命名您的字体并尝试以下结构。

@font-face {
  font-family: 'Francaise';
  font-style: normal;
  font-weight: 400;
  src: url('francaise-regular-demo.ttf'); /* IE9 Compat Modes */
  src: local('Francaise Regular Demo'), local('Francaise Regular Demo'),
       url('francaise-regular-demo.ttf') format('truetype');
}

在您的 CSS 中使用 font-family: 'Francaise';。