Font-Face使用绝对路径

Question

是否可以使用绝对路径,@fontace?我有以下目录结构:

-HP
|--font
|  |- Monoton.woff
|  |- Monoton.eot
|--css
|  |- font.css
|  |- fontface.css
|--html
   |-index.html

定义了font-face

@font-face {
    font-familiy: Monoton;
    src: url('../font/Monoton.woff') format('woff'); // EDIT: Change fonts to font the name of th woff-file
    font-weight: normal;
    font-style: normal;
}

并在css中使用它作为类单调:

@import url('fontFace.css');

.monoton {
    font-familiy: Monoton, cursive;
    font-size: 1.875em;
    color: rgba(0, 200, 0, 1);
}

但它不适用于chrome,Firefox和co.有人可以解释一下为什么吗？我已将fontFace.css所有字体文件放在html目录中.现在它会工作..

Answer 1

首先,这是相对路径,而不是 绝对路径,绝对路径意味着使用喜欢http://whatever.com/fonts/font_file.woff,其次它不起作用,因为你有一个名称font在哪里使用的文件夹../fonts/.

另外,我看到文件名不匹配,你有一个文件,Monton.woff但你正在使用Monoton-Regular-webfont.woff,你需要相应地更改文件名并使用下面的代码片段

@font-face {
    font-family: Monoton;
    src: url('../font/Monoton-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

您也可以直接在谷歌中使用这些字体,方法是在样式表中包含以下代码段

演示

@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
}