Vue项目导入字体文件的方法步骤

2024-04-18 0 802
目录
  • 1、导入字体文件
  • 2、项目字体包过大?
  • 附:vue 项目引入字体图标报错、不显示等问题
  • 总结

要想实现UI设计师设计的原型效果,有时候需要用到一些特殊的字体,在项目中就需要导入相关的字体文件。本文章以平方字体为例。

1、导入字体文件

1、下载相应的字体文件,或者找UI设计师要一份(如果UI设计师有的话)。一般字体文件使用 .ttf 格式的即可。将准备好的字体文件,放在项目中,文件目录示例如下:

Vue项目导入字体文件的方法步骤

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、出现报错:

Vue项目导入字体文件的方法步骤

解决方法为:把字体引入方式改为绝对路径

Vue项目导入字体文件的方法步骤

2、不报错,但是不显示图标字体,出现方框

Vue项目导入字体文件的方法步骤

原因可能有两种:①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件

①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入)

Vue项目导入字体文件的方法步骤

②这个就是我遇到的问题,浪费了我好几分钟!!!

解决办法是把font.styl改为font.css

Vue项目导入字体文件的方法步骤

Vue项目导入字体文件的方法步骤

记得在用到图标的地方引入

Vue项目导入字体文件的方法步骤

问题原理后续再写

总结

到此这篇关于Vue项目导入字体文件的文章就介绍到这了,更多相关Vue导入字体文件内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • 解决vue 项目引入字体图标报错、不显示等问题
  • Vue 第三方字体图标引入 Font Awesome的方法
  • vue项目引入字体.ttf的方法
  • vue中引入第三方字体文件的方法示例
  • Vue3项目引入阿里iconfont图标与字体及使用教程

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript Vue项目导入字体文件的方法步骤 https://www.u-9.cn/biancheng/javascript/186809.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务