@芥末的糖-----vue-fontawesome字体和字体大小处理

image

在工作中我们会遇到字体文件*.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>

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

从明天起，做一个幸福的人

喂马，劈柴，周游世界

从明天起，关心粮食和蔬菜

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

从明天起，和每一个亲人通信

告诉他们我的幸福

那幸福的闪电告诉我的

我将告诉每一个人

给每一条河每一座山取一个温暖的名字

陌生人，我也为你祝福

愿你有一个灿烂的前程

愿你有情人终成眷属

愿你在尘世获得幸福

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