Vue 项目导入字体文件

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 往上,当项目中引入过多的字体文件,可能导致项目加载缓慢,影响用户体验。这个时候就应该考虑给字体包来个“瘦身”。

转载请说明出处内容投诉
CSS教程_站长资源网 » Vue 项目导入字体文件

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买