用法

1.定义一个自定义字体

@font-face {font-family: 'iconfont';/*声明一个名为iconfont的字体变量*/src: url('../font/iconfont.eot');src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),/* IE9以下版本的IE需要这个格式 */url('../font/iconfont.woff2') format('woff2'),/* 支持woff2格式的浏览器 */url('../font/iconfont.woff') format('woff'),/* 支持woff格式的浏览器 */url('../font/iconfont.ttf') format('truetype'),/* 支持truetype格式的浏览器 */url('../font/iconfont.svg#iconfont') format('svg');
}

可以设置多个 src 属性，以指定不同的字体资源路径。这样做的目的是为了增强字体的兼容性，以确保在不同的浏览器和设备上都能正常加载字体。

上面设置了三个不同的字体资源路径，分别是 .eot、.woff、.ttf 格式的字体文件，当浏览器无法识别第一个字体文件时，会自动尝试加载第二个字体文件，以此类推。

font-family属性：字体名称 自定义
url属性：自定义字体在当前服务器的位置(可填相对路径和绝对路径)
format属性：字体的格式 主要用于浏览器识别
通常有以下几种：truetype opentype truetype-aat embedded-opentype avg等

TrueType格式(.ttf)
Windows和Mac上常见的字体格式 这是一种原始格式 因此并没有为网页进行优化处理
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf)
以TrueType为基础 也是一种原始格式 但提供了更多的功能
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff)
针对网页进行特殊优化 因此是Web字体中的最佳格式
它是一个开放的TrueType/OpenType的压缩版 同时支持元数据包的分离
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)
IE专用字体格式 可以从TrueType格式创建此格式字体
浏览器支持：IE4+

SVG格式(.svg)
基于SVG字体渲染的格式
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

2.引入自定义字体

font-family: "iconfont"

引入的时候 font-family的名称必须和自定义的名称必须一致

项目中用到的

UI给了字体的ttf文件,分别为test.ttf,test2.ttf

1.新建font文件夹

在vue的项目中的assets中新建一个font文件夹，把.ttf文件放在文件夹中，在新建font.css文件，文件内容如下：

@font-face {font-family: "TEST";/*指定字体的名称*/src: url("test.ttf") format('truetype');/*指定字体文件的路径和格式*/
}
@font-face {font-family: "TEST2";src: url("test2.ttf");
}

2.在vue组件中引用

<template><div id="textPage"></div><div id="chart"></div>
</template>
<script>
export default{name:'test',data(){chartFamily:['TEST','TEST2']},mouted(){this.initChart()},methods:{initChart(){let chart=new Chart({container: 'chart',autoFit: true,// width: 500,height: 240,})chart.axis(positionY, {//X轴样式label: {formatter: (val) => {return val;// return parseInt(val*100).toFixed(2);},style:{fill:"#111",//文字颜色// fontFamily: "Microsoft YaHei",//文字字体fontFamily: this.chartFamily,// fontWeight: 400,//文字粗细fontSize: 14,//文字大小}},line:null,tickLine: null,});}}
}</script>
<style scoped>
#textPage{font-family: 'TEST','TEST2'; //组件下的所有字体都修改了
}
</style>