我正在使用Parcel进行捆绑,我想在项目中包含自定义字体
在我的SCSS中
@font-face {
font-family: "Storytella";
src: url("./fonts/Storytella.otf") format("otf");
}
然后我在这样的地方使用它font-family: 'Storytella', serif;
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
文件夹中,但字体本身未加载到页面中。
我在Chrome的Networks或类似的软件中都没有出现错误,但也没有加载字体。
在index.html中,您需要像这样的链接fonts.css
<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
在fonts.css中]
@font-face {
font-family: "Storytella";
src: url("./fonts/Storytella.otf") format("otf");
}
body {
font-family: 'Storytella', serif;
}