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实现路由监听和参数监听

    vue实现路由监听和参数监听

    今天小编就为大家分享一篇vue实现路由监听和参数监听,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue-router结合vuex实现用户权限控制功能

    vue-router结合vuex实现用户权限控制功能

    这篇文章主要介绍了vue-router结合vuex实现用户权限控制功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue axios请求成功却进入catch的原因分析

    vue axios请求成功却进入catch的原因分析

    这篇文章主要介绍了vue axios请求成功却进入catch的原因分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 基于vue 实现token验证的实例代码

    基于vue 实现token验证的实例代码

    这篇文章主要介绍了基于vue 实现token验证的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    这篇文章主要介绍了vue使用vue-router beforEach实现判断用户登录跳转路由筛选,本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础。需要的朋友可以参考下
    2018-06-06
  • 详解vue+nodejs获取多个表数据的方法

    详解vue+nodejs获取多个表数据的方法

    这篇文章主要为大家介绍了vue+nodejs获取多个表数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue六大基本类型中的原始值响应式

    Vue六大基本类型中的原始值响应式

    原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值,在 JavaScript 中,原始值是按值传递的,引用类型是按引用传递的,这意味着,如果一个函数接收了一个原始值作为参数,那么形参和实参之间是没有引用关系的,它们是完全独立的两个值
    2023-01-01
  • vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)

    vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)

    这篇文章主要介绍了vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox),这个需求最主要的是要通过方法去调用,为了像el-messagebox使用那样方便,需要的朋友可以参考下
    2022-12-12
  • vue项目中使用tinymce编辑器的步骤详解

    vue项目中使用tinymce编辑器的步骤详解

    本文分步骤给大家介绍了vue项目中使用tinymce编辑器的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue简单的二维数组循环嵌套方式

    vue简单的二维数组循环嵌套方式

    这篇文章主要介绍了vue简单的二维数组循环嵌套方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论