image

在工作中我們會遇到字體文件*.ttf的處理，我們也會用到icon-font,以及UI組件的svg等圖標(biāo)的處理，今天我們在字體和圖片的前端使用中做一個總結(jié)。

一.圖標(biāo)處理vue-fontawesome

官網(wǎng)鏈接: https://fontawesome.com,

1.1.使用方式：

//這三個免費(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：頁面使用

在頁面中直接使用,注意的是這里需要干掉前綴，之前注冊的是faTrash,下面需要改成，trash,注意是小寫。友情簡介參考,(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，一般來說UI會給我們iconfont倉庫里面添加圖標(biāo)，我們在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的路徑內(nèi)容即可。

3.字體大小的處理

npm組件：http://ecomfe.github.io/fontmin/，主要是我們先使用npm包進(jìn)行字體的壓縮然后讓我們頁面用一個壓縮完了的.ttf文件來實(shí)現(xiàn)，我們.ttf文件過大導(dǎo)致頁面太慢。==》但是有一個問題就是當(dāng)我們遇到一些動態(tài)的字體的時候需要預(yù)先都知道才行，無法實(shí)現(xiàn)一個函數(shù)預(yù)加載。還有一個npm包叫font spiderhttp://font-spider.org/是做靜態(tài)字體處理==》字蛛通過分析本地 CSS 與 HTML 文件獲取 WebFont 中沒有使用的字符，并將這些字符數(shù)據(jù)從字體中刪除以實(shí)現(xiàn)壓縮，同時生成跨瀏覽器使用的格式。以后有機(jī)會在用吧

接下來實(shí)現(xià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">要測試字體啦</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>
 

demo地址https://github.com/jiemodetang/tsLearnIngDemo

從明天起，做一個幸福的人

喂馬，劈柴，周游世界

從明天起，關(guān)心糧食和蔬菜

我有一所房子，面朝大海，春暖花開

從明天起，和每一個親人通信

告訴他們我的幸福

那幸福的閃電告訴我的

我將告訴每一個人

給每一條河每一座山取一個溫暖的名字

陌生人，我也為你祝福

愿你有一個燦爛的前程

愿你有情人終成眷屬

愿你在塵世獲得幸福

我只愿面朝大海，春暖花開