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

我是小黄呀！

已于 2022-04-12 10:33:22 修改

阅读量2.3k

点赞数 1

分类专栏： css 文章标签： css

于 2022-04-11 15:24:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42609363/article/details/124098929

版权

本文介绍在Vue项目中如何正确引用新字体。首先从fonts.net.cn下载.ttf字体文件，然后将其放置在项目文件夹内。创建一个css文件，定义font-family并使用url指定ttf文件路径，同时在main.js中引入该css文件。确保完成这些步骤后，在页面中才能正常使用新字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

在网上下载自己所需要的字体文件，我是在https://www.fonts.net.cn/官网直接搜索字体的（使用的时候注意一下注意事项），我看别人在其他地方下载了.ttf、.eot、.woff、.svg文件（他们用的其中一个网站我忘记了，需要开会员），我用的网站里面只有.ttf文件
下载完成后将文件放在项目文件夹里，我的项目里有一个字体文件
新建一个对应的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-WHJZT

最低0.47元/天解锁文章