@font-face 在我的 css 文件中不起作用答案

【问题标题】：@font-face is not working in my css file@font-face 在我的 css 文件中不起作用
【发布时间】：2018-02-08 22:22:42
【问题描述】：

嗯，……想不出来这个。我的自定义字体在 css 文件中不起作用。出于某种原因，css 文件接受自定义字体仅如果它们被放置在系统字体文件夹中。但是，我希望它们在项目的“字体”文件夹中。

项目：

|-theProjectFolder
|-css
  |-style.css
|-fonts
  |-expansiva-bold.otf
|-views
  |-index.hbs

index.hbs：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Site</title>
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
  .........
</body>
</html>

style.css：

/* Custom Fonts */
@font-face {
  font-family: expansiva;
  src: url("../fonts/expansiva-bold.otf"); }
/****************/

.line1 {
  color: black;
  text-align: center;
  margin-top: 150px;
  font-family: expansiva, Arial, sans-serif;
  font-size: 56px;
}

所以有了这个设置，我得到的只是“Arial”字体——没有“expansiva”。我环顾四周，发现提到将字体转换为“网络”字体？但是，当我这样做时，也没有任何变化。

【问题讨论】：

您是否在计算机字体中添加了 expansiva 字体？
检查您的浏览器检查器是否正在加载字体（chrome 上的网络选项卡），如果出现一些错误（如 404），也请检查您的浏览器控制台...

标签： html css fonts font-face font-family

【解决方案1】：

您的自定义字体的字体名称应该用引号引起来，请尝试：
字体系列：'expansiva';

如果它只是在你给它一个本地路径时加载，它在你的服务器上不正确或者你的 url 不正确（你的看起来不错）。

【讨论】：

果然Chrome的Inspect在：网络>字体下显示404。所以我现在卡住了，因为一切看起来都很好，但事实并非如此。

【解决方案2】：

问题是服务器无法访问“/fonts”文件夹。由于这是一个 Node/Express 项目，解决方案是将字体文件夹添加到 Express (index.js)：

const express = require('express');
const hbs = require('hbs');

const app = express();

hbs.registerPartials(__dirname + '/views/partials');
app.set('view engine', 'html');
app.engine('html', require('hbs').__express);

app.use('/css', express.static(__dirname + '/css'));
app.use('/img', express.static(__dirname + '/img'));
app.use('/fonts', express.static(__dirname + '/fonts')); // <--added

app.get('/', (req, res) => res.render('index'));
app.get('/about', (req, res) => res.render('about'));
app.get('/contact', (req, res) => res.render('contact'));


app.listen(3000, () => {
  console.log('App listening at port 3000!')
});

【讨论】：