Шрифты node.js не работают должным образом и не показывают ошибок - PullRequest
0 голосов
/ 28 октября 2019

Я пытаюсь создать веб-сайт, который использует пользовательские шрифты, но когда я пытаюсь использовать их, ничего не происходит.

Я пытался что-то передвигать, менять путь к файлу и искать документацию, но я либоЯ не нашел ничего, что помогло бы мне, или я не понял этого, так как я довольно новичок в программировании в целом.

Мои файлы выложены так:

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");
});

Редактировать: Вот как я включаю файл CSS в мой HTML-файл. Другие стили применяются правильно, поэтому все должно быть в порядке.

  <link rel="stylesheet" href="css/index.css">

И теперь я получаю эту ошибку в моих инструментах разработки

GET http://localhost:3000/css/public/css/fonts/Anurati-Regular.otf net :: ERR_ABORTED404 (не найдено): 3000 / css / public / css / fonts / Anurati-Regular.otf: 1

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Ваши src форматы неверны, .otf файлы используют format('opentype'). Из MDN :

Доступны следующие типы: "woff", "woff2", "truetype", "opentype", "embedded-opentype" и "svg".

0 голосов
/ 28 октября 2019

Вы должны сгенерировать веб-шрифт из этого файла otf. Используйте онлайн-инструмент, такой как https://www.fontsquirrel.com/tools/webfont-generator или https://everythingfonts.com/font-face. Там только вы получите файлы образцов, в которых вы получите файлы сгенерированных шрифтов и файл css. Скопируйте CSS из файла CSS и поместите файлы шрифтов в правильный путь как путь CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...