关于字体图标的问题

Posted 2020-12-11 reyirfw

作为前端，我们经常需要和美工拿字体图标文件，经常遇到的有eot，ttf，woff，svg
拿到字体图标文件，我们就要进行一个字体图标文件css编写，方便后期使用

@font-face {
  /* 1.首先指定字体的系列,我们指定为字体图标 */
  font-family: "自定义字体图标名称";
  /* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
  src: url(‘eot文件路径‘); /* IE9*/
  src: url(‘eot文件路径#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘woff文件路径‘) format(‘woff‘),
  url(‘ttf文件路径‘) format(‘truetype‘), /* chrome, firefox, opera, Safari, android, ios 4.2+*/
  url(‘svg文件路径‘) format(‘svg‘); /* iOS 4.1- */
}
/* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
.自定义字体图标名称 {
  font-family:"自定义字体图标名称" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
.icon-guangpan::before { content: "e604"; }
 
.icon-zanting::before { content: "e64b"; }