vue中css引用新字体（css引用新字体不成功）

vue中css引用新字体（css引用新字体不成功）

废话就不多说了，直接上步骤

1. 在网上下载自己所需要的字体文件，我是在https://www.fonts.net.cn/官网直接搜索字体的（使用的时候注意一下注意事项），我看别人在其他地方下载了.ttf、.eot、.woff、.svg文件（他们用的其中一个网站我忘记了，需要开会员），我用的网站里面只有.ttf文件

2. 下载完成后将文件放在项目文件夹里，我的项目里有一个字体文件

3. 新建一个对应的css文件，内容如下：

@font-face {
    font-family: "whjztfont"; /* Project id  */
    src: url('../font/FZZJ-WHJZTJW.ttf') format('truetype');/* Safari, Android, iOS */
  	
  	/* 下面是其他类型文件，可以参考一下 */
	src: url('../font/FZZJ-WHJZTJW.eot'); /* IE9 Compat Modes */      /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/
  	src: url('../font/FZZJ-WHJZTJW.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../font/FZZJ-WHJZTJW.woff') format('woff'), /* Modern Browsers */
         url('../font/FZZJ-WHJZTJW.svg#AdobeHeitiStdR') format('svg'); /* Legacy iOS */
  }
}

这边的font-family用于设置一个字体名字，按自己的喜好设置即可，url放ttf文件，format不需要修改

4. main.js中引入css文件（我看了好几篇文章都没说这一步，我不知道别人不加这一步能不能使用，反正我不加这一步不能使用字体，建议各位还是加一下！）

import '@/static/font/whjztfont.css'

5. 在需要的界面使用该字体

font-family: whjztfont;

如有错误，烦请指出，谢谢！