要想实现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、在需要的地方使用即可:文章来源：https://www.toymoban.com/news/detail-722615.html
.container {
width: 100vw;
height: 100vh;
font-family: 'PingFangSC-Regular';
}2、项目字体包过大？
一般的的字体文件（以 .ttf 格式为例）都在10M 往上，当项目中引入过多的字体文件，可能导致项目加载缓慢，影响用户体验。这个时候就应该考虑给字体包来个“瘦身”。文章来源地址https://www.toymoban.com/news/detail-722615.html
到了这里，关于Vue 项目导入字体文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
