前端工程配置字体库

前言：在需求开发中，尤其移动端，ui设计经常使用一些特殊字体，作为前端开发为了将设计稿完美还原自然也需要将字体样式统一

字体库推荐

http://fonts.mobanwang.com/

下载需要字体

在上述链接中搜索你需要的字体，点击下载，例如迷你简雪君字体

下载完成内容如下图，重点为ttf文件

在工程中新建fonts文件夹,并将刚下载的ttf文件放入(文件最好改为英文命名)

在fonts文件夹中新建font.css文件进行配置

@font-face { font-family: "HYXJ"; src: url("./mnhyxj.ttf") format("truetype"); } 12345

main.js中引入font.css

import './assets/fonts/font.css' 1 或者在需要的文件中引入

<style src=''../../assets/fonts/font.css'></style> <style> @import '../../assets/fonts/font.css'; </style> <style> @import url('../../assets/fonts/font.css'); </style> 1234567

最后直接使用字体即可

html, body { font-family:"HYXJ"; } 123 若为个别页面需要单独配置即可

.headTitle { font-family:"HYXJ"; } 123

其他

推荐使用方案字蛛(font-spider)/ gulp-font-spider / font-spider-plus