node.js字体无法正常工作并且没有显示错误

问题描述 投票:0回答:1

我正在尝试建立一个使用自定义字体的网站,但是当我尝试使用它们时,什么也没有发生。

我已经尝试过移动,更改文件路径和查找文档,但是我没有找到任何对我有帮助的东西,或者因为我对编程尚不熟悉,所以我不了解它。

我的文件这样布置:

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">

现在我的开发工具中出现此错误

获取http://localhost:3000/css/public/css/fonts/Anurati-Regular.otf net :: ERR_ABORTED 404(未找到):3000 / css / public / css / fonts / Anurati-Regular.otf:1

非常感谢您的帮助!我真的很感激。

javascript css node.js express fonts
1个回答
1
投票

您的src格式不正确,.otf文件使用format('opentype')From MDN

[可用类型为:“ woff”,“ woff2”,“ truetype”,“ opentype”,“ embedded-opentype”和“ svg”。

© www.soinside.com 2019 - 2024. All rights reserved.