我之前将 Gulp 设置为使用 Sass、Pug 和 Babel。字体加载正常。我切换到使用 Parcel现在它按预期工作,除了一件事。字体未加载。
这是 _fonts.sass
的全部内容:
@font-face
font-family: "MyWebFont"
src: url(../fonts/economica-regular-otf.eot)
src: url(../fonts/economica-regular-otf.eot?#iefix) format("embedded-opentype"),
url(../fonts/economica-regular-otf.woff2) format("woff2"),
url(../fonts/economica-regular-otf.woff) format("woff"),
url(../fonts/economica-regular-otf.ttf) format("ttf")
@font-face
font-family: "MyWebFontBold"
src: url(../fonts/economica-bold-otf.eot)
src: url(../fonts/economica-bold-otf.eot?#iefix) format("embedded-opentype"),
url(../fonts/economica-bold-otf.woff2) format("woff2"),
url(../fonts/economica-bold-otf.woff) format("woff"),
url(../fonts/economica-bold-otf.ttf) format("ttf")
body
font-family: 'MyWebFont', 'Titillium Web', sans-serif
text-rendering: auto
text-rendering: geometricPrecision
文件夹结构如下:
/dist
/src
-- / pug
--- index.pug
-- / sass
--- _fonts.sass
--- _animations.sass
--- _blocks.sass
--- _elements.sass
--- styles.sass
-- / js
--- // all the scripts
-- / fonts
--- // all the fonts are here
您可以在此处("new"分支)找到元素文件:GitHub
最佳答案
我不久前解决了这个问题。
在 package.json
中,我将 build
脚本编辑为 "build": "parcel build src/pug/index.pug --public-url ./-d 距离”
。
然后我编辑了 _fonts.sass
所以 @font-face
不会进入目录。例如,src: url(../fonts/economica-regular-otf.eot)
变成了 src: url(./fonts/economica-regular-otf.eot)
.
我已经有一段时间没弄明白了,所以我不记得这背后的原因,但它确实有效。
关于html - @font-face 在安装 ParcelJS 后不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49304800/