Question

我的智慧结束了这个问题。我试图包含一种字体。 CSS文件位于project/css/。我的字体位于project/fonts/iconfont/。我在该文件夹中有以下字体文件（即使我可能只需要woff）：

icons.eot
icons.svg
icons.ttf
icons.woff

这就是我尝试包含我的字体的方式：

@font-face {
    font-family: icons;
    src: url(../fonts/iconfont/icons.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

但是我无法使用该字体。使用Chrome开发人员工具检查它甚至无法加载。我在这里做错了什么？

Answer 1

尝试链接@ font-face选择器中的所有字体格式，并使用引号将自定义名称调用font-family。

/*--- Define a custom web font ---*/
@font-face {
  font-family: 'YourWebFont';
  src:
     url('../fonts/iconfont/icons.woff') format('woff'), 
     url('../fonts/iconfont/icons.ttf') format('ttf'), 
     url('../fonts/iconfont/icons.eof')  format('eof'),
     url('../fonts/iconfont/icons.svg')  format('svg');
}
/*--- Use that font on the page ---*/
body {
  font-family: 'YourWebFont', sans-serif;
}

祝你好运！

字体未加载

1 个答案: