老师帮看一下这个问题

来源: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;
  }

相关截图:老师课程的截图

https://img.mukewang.com/climg/61b17c8209d8b96a13620836.jpg

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

https://img.mukewang.com/climg/61b17ca709e78b6211030617.jpg

相关截图:我的效果图

https://img.mukewang.com/climg/61b17cc009c3f10607460687.jpg

看我的跟视频的对比,为什么我下载到桌面的iconfont.css文件中缺那么多字体样式?

我是跟着步骤做下来的。如果不行的话我就用另外一种了,创建icon文件夹放字体文件另外一种方式

写回答

1回答

好帮手慕星星

2021-12-09

同学你好,课程中没有演示完整,需要将项目下载下来

https://img.mukewang.com/climg/61b191bf0965e82108980169.jpg

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

https://img.mukewang.com/climg/61b191b4094c27f602680196.jpg

课程中最后使用了第二种在线了,为了方便,同学也可以换为在线的链接。

祝学习愉快~

0

0 学习 · 15276 问题

查看课程