Font-Face 使用绝对路径

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

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

定义字体

@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 等。有人可以解释一下为什么吗？ 我已经把fontFace.css以及 html 目录中的所有字体文件。现在它会起作用..

首先是相对路径 and not 绝对路径,绝对路径意味着使用likehttp://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;
}

您还可以通过在样式表中包含以下代码片段来直接使用来自谷歌的这些字体

Demo http://jsfiddle.net/PaEJq/

@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');
}