使用CSS加载本地字体
我在本地托管一个 javascript 项目并尝试使用本地字体，但它似乎未加载，这是我的 style.css 代码，ipixregular 是我尝试使用的字体，我可以知道可能是什么问题吗？我需要在html中引用它吗？谢谢
@import "@fontsource/press-start-2p/index.css";
@import "@16bits/nes.css/css/nes.min.css";
@font-face {
font-family: 'ipixregular';
src: url('front/ipix-webfont.eot');
src: url('front/ipix-webfont.eot?#iefix') format('embedded-opentype'),
url('front/ipix-webfont.woff2') format('woff2'),
url('front/ipix-webfont.woff') format('woff'),
url('front/ipix-webfont.ttf') format('truetype'),
url('front/ipix-webfont.svg#ipixregular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
font-family: ipixregular
}
.nes-btn {
font-family: "Press Start 2P";
}
I am hosting a javascript project on locally and trying to use the local font, but it seem not loaded, here is my style.css code, ipixregular is the font i am trying to use, may I know what might be the problem? and do I need to refere it in html? thanks
@import "@fontsource/press-start-2p/index.css";
@import "@16bits/nes.css/css/nes.min.css";
@font-face {
font-family: 'ipixregular';
src: url('front/ipix-webfont.eot');
src: url('front/ipix-webfont.eot?#iefix') format('embedded-opentype'),
url('front/ipix-webfont.woff2') format('woff2'),
url('front/ipix-webfont.woff') format('woff'),
url('front/ipix-webfont.ttf') format('truetype'),
url('front/ipix-webfont.svg#ipixregular') format('svg');
font-weight: normal;
font-style: normal;
}
* {
font-family: ipixregular
}
.nes-btn {
font-family: "Press Start 2P";
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
@Import加载字体样式规则
@font-face加载字体
我不明白为什么有规则
字体家庭：“按下2p”；
因为那不是一个有效的字体家庭。
你可以尝试
身体 * {font-fomy：ipixregular;}
@import loads the font style rules
@font-face loads the font
I do not understand why you have the rule
font-family: "Press Start 2P";
as that is not a valid font family.
You could try
body * {font-family: ipixregular;}
我注意到您在URL中使用“前面”而不是“字体”，这是清楚的 - 这是正确的文件夹名称吗？可能只是错别字。
即，来自：
url（'front/ipix-webfont.eot'）to：url（'font/ipix-webfont.eot'）I noticed that you are using "front" instead of "font" in your URLs, to be clear - is this the right folder name? Could simply be a typo.
I.e., from:
url('front/ipix-webfont.eot')to:url('font/ipix-webfont.eot')