我正在尝试构建一个使用自定义字体的网站,但是当我尝试使用它们时没有任何反应。
我的文件布局如下:
https://gyazo.com/5ee766f030290e5b2fa42320cc39f10b
我的 CSS 文件:
@font-face {
font-family: 'anuratiregular';
src: url('public/css/fonts/Anurati-Regular.otf') format('otf'),
url('public/css/fonts/Anurati-Regular.otf') format('otf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'onedayregular';
src: url('public/css/fonts/ONEDAY.otf') format('otf'),
url('public/css/fonts/ONEDAY.otf') format('otf');
font-weight: normal;
font-style: normal;
}
.section-1-header {
font-family: anuratiregular;
}
我的 JS 文件:
const express = require("express");
const app = express();
const path = require('path');
//Starts the server and allows it to Listen
//on port 3000 for any traffic
app.listen(3000, function() {
console.log("Listening on Port 3000");
});
app.use(express.static(path.join(__dirname, 'public')));
//delivers index.html file when people navigate
//to the root page
app.get("/", function(req, res) {
res.sendFile(__dirname + "/html/index.html");
});
这是我在 HTML 中包含 CSS 文件的方式。其他样式应用正确,因此应该没问题。
<link rel="stylesheet" href="css/index.css">
我在我的开发工具中遇到这个错误:
GET http://localhost:3000/css/public/css/fonts/Anurati-Regular.otf net::ERR_ABORTED 404 (Not Found) :3000/css/public/css/fonts/Anurati-Regular.otf:1
最佳答案
您的src
格式不正确,.otf
文件使用format('opentype')
。 From MDN :
The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
关于javascript - node.js 字体无法正常工作并且没有显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58595368/