Vue项目导入字体文件的方法步骤
更新时间：2024年03月30日 09:34:35 作者：安之若素づ
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下
要想实现UI设计师设计的原型效果，有时候需要用到一些特殊的字体，在项目中就需要导入相关的字体文件。本文章以平方字体为例。
1、导入字体文件
1、下载相应的字体文件，或者找UI设计师要一份（如果UI设计师有的话）。一般字体文件使用 .ttf 格式的即可。将准备好的字体文件，放在项目中，文件目录示例如下：
2、创建一个.css 文件，以上面文件目录示例中 font.css 文件为例，在该文件中声明字体：
@font-face {
font-family: "PingFangSC-Medium";
src: url('./PingFang\ SC\ Medium.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PingFangSC-Regular";
src: url('./PingFang\ SC\ Regular.ttf');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PingFangSC-Semibold";
src: url('./PingFang\ SC\ Semibold.ttf');
font-weight: normal;
font-style: normal;
}3、全局引入 font.css 文件:
// 在 main.js 中引入 import '@/assets/iconfont/iconfont.css'
4、在需要的地方使用即可:
.container {
width: 100vw;
height: 100vh;
font-family: 'PingFangSC-Regular';
}2、项目字体包过大？
一般的的字体文件（以 .ttf 格式为例）都在10M 往上，当项目中引入过多的字体文件，可能导致项目加载缓慢，影响用户体验。这个时候就应该考虑给字体包来个“瘦身”。
附：vue 项目引入字体图标报错、不显示等问题
问题：在项目开发时使用字体图标，发现两个问题；
1、出现报错：
解决方法为：把字体引入方式改为绝对路径
2、不报错，但是不显示图标字体，出现方框
原因可能有两种：①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件
①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入）
②这个就是我遇到的问题，浪费了我好几分钟！！！
解决办法是把font.styl改为font.css
记得在用到图标的地方引入
问题原理后续再写
总结
到此这篇关于Vue项目导入字体文件的文章就介绍到这了,更多相关Vue导入字体文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
工作中遇到需要根据单元格某个属性合并,特此记录下,下面这篇文章主要给大家介绍了关于vue element ui表格相同数据合并单元格效果的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-11-11
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue和React有哪些区别，帮助大家更好的理解和学习JavaScript框架，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍是八种vue实现组建通信的方式，包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合 兄弟组件传值等等，想具体了解的朋友可以参考下面文章的具体内容2021-09-09
在Vue.js的开发过程中,组件方法的定义和调用是非常常见的,有时候,为了响应事件或其他操作,我们需要在组件的方法中使用匿名函数,本文将深入探讨如何在Vue组件的方法中加载和使用匿名函数,并提供详细的代码示例和解释,帮助开发者更好地理解和应用这些技术2024-09-09
今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue 开发之路由配置方法,结合实例形式详细分析了了vue.js路由原理、配置方法及相关操作注意事项,需要的朋友可以参考下2019-12-12
本文主要介绍了Vue.js结合SortableJS实现树形数据拖拽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家介绍了vue shallowRef作用及引发问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在vue.js项目中使用vue-router，可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
最新评论