node.js 字体无法正常工作且未显示任何错误

Question

我正在尝试建立一个使用自定义字体的网站，但是当我尝试使用它们时没有任何反应。

我的文件布局如下：

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

Answer 1

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

The available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".

Answer 2

您必须从该 otf 文件生成网络字体。使用在线工具，例如 https://www.fontsquirrel.com/tools/webfont-generator 要么 https://everythingfonts.com/font-face。只有你会得到一个样本文件，其中生成的字体文件和 css 文件你会得到。从 css 文件复制 css 并将字体文件放在正确的路径中作为 css 路径。

node.js 字体无法正常工作且未显示任何错误

node.js fonts not working properly and showing no errors

javascript

css

fonts

node.js

express