通过 CSS 导入字体问题

Question

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

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

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

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

Answer 1

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

@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';。

Answer 2

首先检查

Browser Support for Font Formats

对字体使用 src

@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

* {
   font-family: myFirstFont;
}

你可以参考这个网站 http://fontsforweb.com/index.php

通过 CSS 导入字体问题

Issue importing font via CSS

html

css

font-face