@尽管没有报告的错误，CSS文件中的Font-face不工作 [英] @Font-face in CSS file not working despite no reported error

问题描述

我想这是一个普遍的问题，但通过阅读几个线程后，我不能狐狸的问题。所以：

我正在开发一个网站，目前正在我的本地机器上使用它（没有任何web服务器，只有我的IDE）。我的文件夹结构如下所示：

  | 
 | 
 ---字体
 | | 
 | --- Raleway-Regular.ttf 
 | 
 ---- css 
 | | 
 | --- default.css 
 | 
 --- main.html 
  

我将css文件中的字体包含：

  @ font-face {
 font-family：Raleway，sans-serif; 
 src：url（../ fonts / Raleway-Regular.ttf）格式（truetype）; 
} 
 
 @ font-face {
 font-family：Raleway，sans-serif; 
 font-weight：bold; 
 src：url（../ fonts / Raleway-Bold.ttf）格式（truetype）; 
 
 
 
 
 
 
并在我的课程中使用它们：
 
 
  .l-menu-group {
 display：inline-block; 
 float：right; 
身高：100％; 
 margin-right：40px; 
颜色：＃505050; 
 font-family：Raleway，sans-serif; 
 text-transform：大写; 
 
 
 
 $ b我正在使用Opera并且网络浏览器控制台没有报告任何错误（没有404等），也访问本地主机：端口/项目/字体/ Raleway-Regular.ttf导致下载字体，从而工作。我清空了缓存，一切都没有成功。
 
 
 
 编辑：只使用Google字体链接做了这项工作，但我仍然希望服务器本地的所有文件。 
 
 
 
任何帮助都将不胜感激：  当解释方法

带有 @ font-face 的字体，您的 font-family 描述符只能是字体字体名称，如下所示：

  font-family：Raleway; 
  

而包含 sans-serif ，这是无效的。

I guess this is a common problem but after reading through several threads I wasn't able to fox the problem. So:

I'm developing a website and am currently using it on my local machine (without any webserver, just my IDE). My folder structure would look like this:

|
|
 ---fonts
|    |
|     ---Raleway-Regular.ttf
|
 ----css
|    |
|     ---default.css
|
 --- main.html

I'm including the font in my css file like that:

@font-face {
font-family: Raleway, sans-serif;
src: url("../fonts/Raleway-Regular.ttf") format("truetype");
}

@font-face {
font-family: Raleway, sans-serif;
font-weight: bold;
src: url("../fonts/Raleway-Bold.ttf") format("truetype");
}

and using them in my class:

.l-menu-group {
display: inline-block;
float: right;
height: 100%;
margin-right: 40px;
color: #505050;
font-family: Raleway, sans-serif;
text-transform: uppercase;
}

I'm using Opera and the network/browser console did not report any errors (no 404 etc.), also visiting at localhost:port/Project/fonts/Raleway-Regular.ttf resulted in downloading the font and thus worked. I've emptied my cache, everything without success.

Edit: Just using Google Fonts links did the job but I still would like to have all files local to the server.

Any help would be greatly appreciated :)

解决方案

When specifying fonts with @font-face, your font-family descriptor must be only the font name, like so:

font-family: "Raleway";

whereas you have included sans-serif, which is invalid.

这篇关于@尽管没有报告的错误，CSS文件中的Font-face不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！