在前端的網頁製作中，經常要使用到小圖示來美化自己的網頁，或者使用自定義的字型來美化，現在來看看如何用css3的屬性font-face來結合阿里的向量庫，首先進入阿里的向量相簿，將自己選好的圖示加入到購物車內，比如下載csdn的圖示：

    接著點選下載程式碼，則會獲得一個資料夾，主要用到的檔案如下：

    其中的除了.css檔案外，都是自定義的字型檔案，裡面包含著你所下載的圖示，開啟.css檔案會發下有如下css程式碼：

@font-face
 
 {font-family: "iconfont";
  src: url('iconfont.eot?t=1541600405827'); /* IE9*/
  src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==')
 
 format('woff'),
  url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing
 
: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-csdn:before { content: "\e50d"; }

    從程式碼中可以看到，不同的自定義的字型檔案對應著不同的瀏覽器核心，而在最後一行，用css程式碼命名標出是csdn圖示的，所以不用擔心找不到對應的圖示了。將上述檔案拷進自己的專案，需注意的是，不知道怎麼回事，.css裡選擇器用原來的名字會不顯示效果，這裡需要把.css裡的選擇器改名：

@font-face {font-family: "csdn1";
  src: url('iconfont.eot?t=1541600405827'); /* IE9*/
  src: url('iconfont.eot?t=1541600405827#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQ8AAsAAAAABoAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY7g0b/Y21hcAAAAYAAAABLAAABcOY1stFnbHlmAAABzAAAAIwAAACM6BEYk2hlYWQAAAJYAAAALwAAADYTMW8naGhlYQAAAogAAAAcAAAAJAfeA4NobXR4AAACpAAAAAgAAAAICAAAAGxvY2EAAAKsAAAABgAAAAYARgAAbWF4cAAAArQAAAAeAAAAIAEOADJuYW1lAAAC1AAAAUUAAAJtPlT+fXBvc3QAAAQcAAAAHQAAAC5khGV0eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8j7lZW7438AQw9zA0AAUZgTJAQDfAwv7eJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf8r7/z+MBPJZwCQDIxvDKOABkzJQHjisIJiBEQBGPgmZAAACAAD/gAQAA4AACwAlAAABFgAXBgAHJgAnNgABNw4BIyImNz4BFzIWFzcuASMOAQcGFhcyNgIA2gEhBQX+39ra/t8FBQEhAZgLGlUlZWUHC4JcKlYXDiBOOp7nEgqyrzxVA4AF/t/a2v7fBQUBIdraASH9FWwHCUhKUkEBCwdxCAkBh39tigIJAAAAeJxjYGRgYADiKIuvV+L5bb4ycLMwgMANTtGpCPp/AwsDcwOQy8HABBIFABUkCTIAeJxjYGRgYG7438AQw8IAAkCSkQEVMAEARwgCawQAAAAEAAAAAAAAAABGAAB4nGNgZGBgYGJQA2IGMIuBgQsIGRj+g/kMAAxkAUEAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgImRiZGZgSW5OCWPgQEACeIBwgAAAA==') format('woff'),
  url('iconfont.ttf?t=1541600405827') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1541600405827#iconfont') format('svg'); /* iOS 4.1- */
}

.csdn {
  font-family:"csdn1" !important;
  font-size:16px;
  font-style:normal;
  color: brown;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-csdn:before { content: "\e50d"; }

    在html裡引用：

<p class="csdn icon-csdn">Hello world!</p>

    效果為：