Question

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

项目：

|-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”。我环顾四周，发现提到将字体转换为“web”字体？但是，当我这样做时，也没有任何变化。

Answer 1

自定义字体的字体名称应使用引号，请尝试：
font-family：＆＃39; expansiva＆＃39;;

如果仅在您为其指定本地路径时才加载，则它在您的服务器上是正确的，或者您的网址不正确（尽管您看起来很好）。

Answer 2

问题是服务器无法访问“/ fonts”文件夹。由于这是一个Node / Express项目，解决方案是将fonts文件夹添加到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!')
});

@ font-face无法在我的css文件

2 个答案: