font拓展字體

最近接觸了一個將字體拓展的方法,感覺很不錯，所以積累一下。

最近接觸的項目一直再用antd，它本身已經提供了很多圖標，但是依然不夠用，所以需要我們拓展出來一些。

 

當我們下載到本地之后，就會有幾個文件，我們只需要將這幾個文件引入到項目中，就可以使用了

 

.iconfont-mixin() {
  &:before {
    font-family:"anticon","anticon_user" !important;
  }
}
//上面的方法可以將anticon字體拓展出來，變成原來的anticon和anticon_user的並集，這一句很關鍵，可以覆蓋less的所有字體文件

@font-face {font-family: "anticon_user";
   src: url('iconfont.eot?t=1466754517'); /* IE9*/
   src: url('iconfont.eot?t=1466754517#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('iconfont.woff?t=1466754517') format('woff'), /* chrome, firefox */
   url('iconfont.ttf?t=1466754517') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   url('iconfont.svg?t=1466754517#anticon_user') format('svg'); /* iOS 4.1- */
}

.anticon_user {
    font-family:"anticon_user" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.anticon-setting:before { content: "\e109"; }
.anticon-bus:before { content: "\e10a"; }
.anticon-mobile:before { content: "\e10b"; }
.anticon-file-text:before { content: "\e10d"; }
.anticon-database:before { content: "\e10e"; }
.anticon-cloud-upload-mid:before { content: "\e10f"; }
.anticon-dashboard:before { content: "\e110"; }
.anticon-medicine-o:before { content: "\e100"; }
.anticon-tip-o:before { content: "\e101"; }
.anticon-earth-o:before { content: "\e102"; }
.anticon-box-o:before { content: "\e103"; }
.anticon-calendar-o:before { content: "\e104"; }
.anticon-money-o:before { content: "\e105"; }
.anticon-pencil-o:before { content: "\e106"; }
.anticon-voice-o:before { content: "\e107"; }
.anticon-sign:before { content: "\e108"; }

const menuIcon = {
  "1": "dashboard",
  "2": "database",
  "3": "mobile",
  "4": "bus"
}
<Icon type={menuIcon[4]}/>  
就可以將這個圖片拓展出來，因為antd本身封裝會將Icon的type="xxx",變成class="anticon-xxx",所以就可以拓展出來了。