如何使用Parcel从@ font-face加载字体? [英] How to load font from @font-face with Parcel?

问题描述

我正在使用Parcel进行捆绑，我想在项目中包含自定义字体

I'm using Parcel for bundling and I want to include custom font to my project

在我的SCSS中

@font-face {
    font-family: "Storytella";
    src: url("./fonts/Storytella.otf") format("otf");
}

然后我在这样的地方使用它
font-family:"Storytella"，衬线；

Then I'm using it somewhere like this
font-family: 'Storytella', serif;

package.json

package.json

{
  "name": "pr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "normalize.css": "^8.0.1",
    "parcel-bundler": "^1.12.3"
  },
  "devDependencies": {
    "node-sass": "^4.12.0",
    "parcel-plugin-static-files-copy": "^2.2.0",
    "pug": "^2.0.4"
  },
  "scripts": {
    "dev": "parcel index.pug",
    "build": "parcel build index.pug --out-dir dist"
  },
  "staticFiles": {
    "staticPath": "dist",
    "watcherGlob": "**"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

在运行 npm run dev 时，字体放置在 dist 文件夹中，但是字体本身未加载到页面中.

While running npm run dev the font is placed inside dist folder but the font itself doesn't get loaded to the page.

在Chrome的Networks或类似的程序中，我没有收到任何错误，但也没有加载字体.

I get no errors in Networks in Chrome or anything like this but also no loading of the font.

推荐答案

在index.html中，您需要像这样的链接fonts.css

in index.html you need link fonts.css like this

<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />

在fonts.css中

in fonts.css

@font-face {
  font-family: "Storytella";
  src: url("./fonts/Storytella.otf") format("otf");
}

body {
  font-family: 'Storytella', serif;
}

这篇关于如何使用Parcel从@ font-face加载字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！