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网址而不添加空格。只需重命名字体并尝试以下结构即可。

@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

首先检查

浏览器对字体格式的支持

使用src字体

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

* {
   font-family: myFirstFont;
}

您可以参考该网站 http://fontsforweb.com/index.php

通过CSS导入字体时出现问题

2 个答案: