在工作中我們會(huì)遇到字體文件*.ttf的處理，我們也會(huì)用到icon-font,以及UI組件的svg等圖標(biāo)的處理藤韵，今天我們?cè)谧煮w和圖片的前端使用中做一個(gè)總結(jié)。
一.圖標(biāo)處理vue-fontawesome
官網(wǎng)鏈接: https://fontawesome.com,
1.1.使用方式：
//這三個(gè)免費(fèi)
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：頁(yè)面使用
在頁(yè)面中直接使用,注意的是這里需要干掉前綴宣吱，之前注冊(cè)的是
faTrash,下面需要改成蓉冈，trash,注意是小寫。友情簡(jiǎn)介參考,(https://www.hangge.com/blog/cache/detail_2104.html)
<template>
<div class="home">
<font-awesome-icon icon="trash" />
</div>
</template>
二.iconfont使用钧唐。
官網(wǎng)：https://www.iconfont.cn忙灼，一般來(lái)說(shuō)UI會(huì)給我們iconfont倉(cāng)庫(kù)里面添加圖標(biāo)，我們?cè)趍ain.js做一下全局的引入逾柿，在頁(yè)面就直接用即可缀棍。
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的路徑內(nèi)容即可。
3.字體大小的處理
npm組件：http://ecomfe.github.io/fontmin/机错，主要是我們先使用npm包進(jìn)行字體的壓縮然后讓我們頁(yè)面用一個(gè)壓縮完了的.ttf文件來(lái)實(shí)現(xiàn)爬范，我們.ttf文件過(guò)大導(dǎo)致頁(yè)面太慢。==》但是有一個(gè)問(wèn)題就是當(dāng)我們遇到一些動(dòng)態(tài)的字體的時(shí)候需要預(yù)先都知道才行弱匪，無(wú)法實(shí)現(xiàn)一個(gè)函數(shù)預(yù)加載青瀑。還有一個(gè)npm包叫
font spiderhttp://font-spider.org/是做靜態(tài)字體處理==》字蛛通過(guò)分析本地 CSS 與 HTML 文件獲取 WebFont 中沒(méi)有使用的字符璧亮，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時(shí)生成跨瀏覽器使用的格式斥难。以后有機(jī)會(huì)在用吧
接下來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的功能在vue項(xiàng)目的實(shí)戰(zhàn)中
fontmin.js（node fontmin.js運(yùn)行之后生成壓縮.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">要測(cè)試字體啦</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/站酷妙典風(fēng)云體.ttf') format('truetype');
}
div {
font-family: 'zipfont';
text-align: center;
}
</style>
從明天起，做一個(gè)幸福的人
喂馬哑诊，劈柴群扶，周游世界
從明天起，關(guān)心糧食和蔬菜
我有一所房子镀裤，面朝大海竞阐，春暖花開
從明天起，和每一個(gè)親人通信
告訴他們我的幸福
那幸福的閃電告訴我的
我將告訴每一個(gè)人
給每一條河每一座山取一個(gè)溫暖的名字
陌生人暑劝，我也為你祝福
愿你有一個(gè)燦爛的前程
愿你有情人終成眷屬
愿你在塵世獲得幸福
我只愿面朝大海骆莹，春暖花開
