老师帮看一下这个问题
来源:2-1 flex + iconfont 完成首页 docker 样式编写
要每天学习的小蓝同学
2021-12-09 11:50:55
相关代码:下载的iconfont.css中的
@font-face {
font-family: "iconfont"; /* Project id 2999866 */
src: url('iconfont.woff2?t=1639021129865') format('woff2'),
url('iconfont.woff?t=1639021129865') format('woff'),
url('iconfont.ttf?t=1639021129865') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-homefill:before {
content: "\e6bb";
}
.icon-myae:before {
content: "\e65f";
}
.icon-cart:before {
content: "\e638";
}
.icon-order:before {
content: "\ebbc";
}相关代码:下载的demo.css中的
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}相关代码:自己创建的iconfont.css
@font-face {
font-family: 'iconfont'; /* Project id 2999866 */
src: url('//at.alicdn.com/t/font_2999866_m4h8jefjmad.woff2?t=1639020746663') format('woff2'),
url('//at.alicdn.com/t/font_2999866_m4h8jefjmad.woff?t=1639020746663') format('woff'),
url('//at.alicdn.com/t/font_2999866_m4h8jefjmad.ttf?t=1639020746663') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}相关截图:老师课程的截图

相关截图:字体库的字体代码链接

相关截图:我的效果图

看我的跟视频的对比,为什么我下载到桌面的iconfont.css文件中缺那么多字体样式?
我是跟着步骤做下来的。如果不行的话我就用另外一种了,创建icon文件夹放字体文件另外一种方式
1回答
同学你好,课程中没有演示完整,需要将项目下载下来

然后再将iconfont.css和几个字体文件一同粘贴到项目中,否则如果不添加本地字体文件,就不能引入使用

课程中最后使用了第二种在线了,为了方便,同学也可以换为在线的链接。
祝学习愉快~
相似问题