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中将其用作类monoton：

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

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

Demo

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

Answer 2

你有一个错字：

font-familiy: Monoton;

Font-Face使用绝对路径

2 个答案: