vuecli 外部字体引入火狐浏览器兼容问题

由于各个浏览器对字体文件的兼容不一样，所以需要把字体文件转换各种格式然后引入。

1. 先需要把你的字体文件格式转换成 eot,otf,svg,ttf,woff 等格式，格式转换网站:

CloudConvert

2. 在assets下面新建fonts文件夹，fonts里面引入各种字体文件，然后新建fonts.css文件

3. fonts.css文件内容：

@font-face {
	font-family: 'HYL2MJN2';
	src: url('./HYL2MJN2.eot');
	src: url('./HYL2MJN2.eot?#iefix') format('embedded-opentype'),
		url('./HYL2MJN2.woff') format('woff'),
		url('./HYL2MJN2.ttf') format('truetype'),
		url('./HYL2MJN2.svg#webfont34M5alKg') format('svg');
}

代码中 HYL2MJN2 是文件名

4. main.js 里面引入css文件

import './assets/fonts/fonts.css'

5. 现在可以在templet里面直接使用了

html部分：

<h1>'f%j3'K'i</h1>

css部分：

h1 {
    font-family: "HYL2MJN2";
}