CSS Font-Face 使用绝对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21251760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-Face use absolute path
提问by Andreas
Is it possible to use an absolute path with @fontace?I have the follow directory-structure:
是否可以使用绝对路径，@fontace?我有以下目录结构：
-HP
|--font
| |- Monoton.woff
| |- Monoton.eot
|--css
| |- font.css
| |- fontface.css
|--html
|-index.html
Defined the 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;
}
and used it in the css as class monoton:
并将其在 css 中用作类单调：
@import url('fontFace.css');
.monoton {
font-familiy: Monoton, cursive;
font-size: 1.875em;
color: rgba(0, 200, 0, 1);
}
but it doesn't works in chrome, Firefox and co. Can somebody explain me why?
I have put the fontFace.cssand all font-files in the html-directory. Now it will work..
但它不适用于 chrome、Firefox 和 co。有人可以解释我为什么吗？我已将fontFace.css所有字体文件放在 html 目录中。现在它会工作..
回答by Mr. Alien
First of all that's relative pathand notabsolute path, absolute path means using like http://whatever.com/fonts/font_file.woffand secondly it doesn't work because you have a folder called fontwhere as you are using ../fonts/.
首先，这是相对路径而不是绝对路径，绝对路径意味着使用 like http://whatever.com/fonts/font_file.woff，其次它不起作用，因为您有一个名为fontwhere的文件夹，因为您正在使用../fonts/.
Also, I see that file names do not match, you have a file called Monton.woffbut you are using Monoton-Regular-webfont.woff, you need to change the file names accordingly and use the snippet below
另外，我看到文件名不匹配，您有一个名为的文件，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;
}
You can also use these fonts directly from google by including the below snippet in your stylesheet
您还可以通过在样式表中包含以下代码段来直接从 google 使用这些字体
@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');
}
回答by ofaurax
You have a typo :
你有一个错字：
font-familiy: Monoton;
