字体使用绝对路径的Font-Face方法

Question

在使用@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 类 monoton：

@import url('fontFace.css');

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

但是在Chrome、Firefox和其他浏览器中不起作用，有人能解释一下原因吗？我已经将fontFace.css和所有字体文件放在HTML目录中了。现在它可以正常工作了。

- Andreas

---

请提供您的页面链接，以便我们查看发生了什么。 - MrUpsidown

目前它只能离线使用... 几天后我会在网站上添加一个链接。 - Andreas

请告诉我你在哪里使用了<绝对路径>？ - Yevgeniy Afanasyev

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

- Mr. Alien

---

@user2457241 所以我需要一个演示，因为只有看到提供的代码，我才能提供帮助。 - Mr. Alien

http://jsfiddle.net/dBskw/ 是我使用的代码，但我不知道如何将文件添加到 fiddle 中...所以我只能展示我使用的代码。 - Andreas

单调风格只是我使用的其中一种，而不是所有我使用的都可以在谷歌上找到。 - Andreas

@user2457241，除非你将它上传到服务器或使用Dropbox提供文件，否则我将无法了解它。 - Mr. Alien

我已经给你发送了一封电子邮件。 - Andreas

Answer 2

你打错字了：

font-familiy: Monoton;

- ofaurax