在工作中我們會遇到字體文件*.ttf的處理，我們也會用到icon-font,以及UI組件的svg等圖標的處理，今天我們在字體和圖片的前端使用中做一個總結。
一.圖標處理vue-fontawesome
官網鏈接: https://fontawesome.com,
1.1.使用方式：
//這三個免費
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/vue-fontawesome
1.2.引入：
//新建文件fontA
import Vue from 'vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faTrash, faPencilAlt, faUndo, faRedo, faEraser, faCircle, faFont, faUpload, faPaintBrush, faSquare, faExclamationTriangle, faSlash } from '@fortawesome/free-solid-svg-icons'
library.add({ faTrash, faPencilAlt, faUndo, faRedo, faEraser, faCircle, faFont, faUpload, faPaintBrush, faSquare, faExclamationTriangle, faSlash })
Vue.component('font-awesome-icon', FontAwesomeIcon)
//main.ts中引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './fontA'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
1.3：頁面使用
在頁面中直接使用,注意的是這里需要干掉前綴，之前注冊的是
faTrash,下面需要改成，trash,注意是小寫。友情簡介參考,(https://www.hangge.com/blog/cache/detail_2104.html)
<template>
<div class="home">
<font-awesome-icon icon="trash" />
</div>
</template>
二.iconfont使用。
官網：https://www.iconfont.cn，一般來說UI會給我們iconfont倉庫里面添加圖標，我們在main.js做一下全局的引入，在頁面就直接用即可。
iconfont.css
@font-face {
font-family: 'iconfont'; /* project id 1348674 */
src: url('//at.alicdn.com/t/font_1348674_uvfm01sm61.eot');
src: url('//at.alicdn.com/t/font_1348674_uvfm01sm61.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1348674_uvfm01sm61.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1348674_uvfm01sm61.woff') format('woff'),
url('//at.alicdn.com/t/font_1348674_uvfm01sm61.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1348674_uvfm01sm61.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//直接引入就好
import "./assets/iconfont.css"
import './fontA'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
每次迭代需求需要更新我們的iconfont.css的路徑內容即可。
3.字體大小的處理
npm組件：http://ecomfe.github.io/fontmin/，主要是我們先使用npm包進行字體的壓縮然后讓我們頁面用一個壓縮完了的.ttf文件來實現，我們.ttf文件過大導致頁面太慢。==》但是有一個問題就是當我們遇到一些動態的字體的時候需要預先都知道才行，無法實現一個函數預加載。還有一個npm包叫
font spiderhttp://font-spider.org/是做靜態字體處理==》字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數據從字體中刪除以實現壓縮，同時生成跨瀏覽器使用的格式。以后有機會在用吧
接下來實現一個簡單的功能在vue項目的實戰中
fontmin.js（node fontmin.js運行之后生成壓縮.ttf文件）
export default function textFont() {
var Fontmin = require('fontmin')
var fontmin = new Fontmin()
// 字體文件路徑
.src('../fontmin/*.ttf')
// 中間件
.use(Fontmin.glyph({
text: '百家姓趙錢孫李周吳鄭王'
}))
// 輸出
.dest('./')
fontmin.run(function (err: any, files: any) {
if (err) throw err
console.log("OK")
})
}
use.vue
<template>
<div class="home">
<div class="zipfont">要測試字體啦</div>
<span>趙錢孫李，周吳鄭王</span>
</div>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import textFont from './fontmin'
@Component({
components: {}
})
export default class fontmin extends Vue {
private created(): void {
textFont()
}
}
</script>
<style scoped>
@font-face {
font-family: 'zipfont';
src: url('../fontmin/站酷妙典風云體.ttf') format('truetype');
}
div {
font-family: 'zipfont';
text-align: center;
}
</style>
從明天起，做一個幸福的人
喂馬，劈柴，周游世界
從明天起，關心糧食和蔬菜
我有一所房子，面朝大海，春暖花開
從明天起，和每一個親人通信
告訴他們我的幸福
那幸福的閃電告訴我的
我將告訴每一個人
給每一條河每一座山取一個溫暖的名字
陌生人，我也為你祝福
愿你有一個燦爛的前程
愿你有情人終成眷屬
愿你在塵世獲得幸福
我只愿面朝大海，春暖花開
