@font-face 在我的 style.css 中不起作用答案

【问题标题】：@font-face not working in my style.css@font-face 在我的 style.css 中不起作用
【发布时间】：2014-04-27 18:34:14
【问题描述】：

我一直在网上搜索这个问题的答案，但找不到。在我的 style.css 中，我使用 @font-face 在我的网站上使用一种字体（我上传到我网站的服务器上）。我做了正确的事，我想是的，但字体仍然不会出现在网站上..

我在 style.css 中的代码：

@font-face { font-family: Brandon Grotesque; src: url('BGREG.otf'); } 

@font-face { font-family: Brandon Grotesque; font-weight: bold; src: url('BGBOLD.otf');}

怎么了？还是我必须添加一些代码？

【问题讨论】：

标签： html css fonts

【解决方案1】：

你设置了什么font-family: Brandon Grotesque？

您刚刚将您的字体添加到“可用”字体中。没有告诉什么使用它。理解？比如，你有 Arial、Comic Sans、Tahoma。但是要使用，你需要设置。

body{
font-family: Brandon Grotesque;
}

>more about

示例：

在哪里

/
/ index.html
/ style
  | style.css
  | BGREG.otf
  | BGBOLD.otf

/index.html

<!DOCTYPE html>
<head>
<title>My title</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<p class="something-bold">Bold</p>
</body>
</html>

style/style.css

@font-face {
font-family: Brandon Grotesque;
src: url('BGREG.otf'); 
}

@font-face {
font-family: Brandon Grotesque;
font-weight: bold; 
src: url('BGBOLD.otf');
}

body{
font-family: Brandon Grotesque;
}

.something-bold{
font-weight: bold;
}

试试（：

您也可以从Google Fonts 加载字体。很容易，通过脚本导入，在 css 或 JS 上导入。

【讨论】：

是的，我做到了，我已经找到了解决方案，我的 style.css 文件不在根文件夹中，字体在。所以这就是为什么不起作用。
请记住，如果答案对您有帮助，请将其标记为解决方案 :)
哦，恭喜。如果您想将您的 css 添加到一个文件夹并将字体添加到另一个文件夹，请查看：只需在 @font-face 中的字体链接之前添加文件夹位置：@font-face { font-family: Brandon Grotesque; src: url('../fonts/BGREG.otf'); } 每个例子

【解决方案2】：

不要忘记用引号将你的字体名称括起来：

@font-face {font-family: "Brandon Grotesque";}

body{font-family: "Brandon Grotesque";}

Do I need to wrap quotes around font family names in CSS?

【讨论】：