如何将Vue项目中的自定义字体样式改写为长尾词？

本文共计395个文字，预计阅读时间需要2分钟。

目录 + Vue使用自定义字体样式 + 步骤一 + 步骤二 + 步骤三 + 步骤四 + 全局自定义字体，提升项目字体美化 + 1. 创建font文件夹 + 2. 创建index.css + 3. 全局注册 + 4. 页面使用Vue自定义字体样式

目录

• Vue使用自定义字体样式
• 步骤一
• 步骤二
• 步骤三
• 步骤四
• 全局自定义字体,提高项目字体美化
• 1、创建font文件夹
• 2、创建index.css
• 3、全局注册
• 4、页面使用

Vue使用自定义字体样式

步骤一

拿到自定义字体包

首先要得到自定义字体包（后缀名为.ttf, .otf, .eot等格式的字体包），可自行下载也可以问UI要字体包。

步骤二

在项目文件夹中进行放置自定义字体包的配置

在项目assets文件夹下新建font文件夹，将拿到的字体包放在font文件夹中；

新建一个font.css文件

步骤三

font.css文件配置

在font.css文件中定义所用字体

@font-face {     font-family: 'ZI DING YI'; /* 重命名字体名 */     src: url('ZI DING YI.TTF');     font-weight: normal;     font-style: normal; }

步骤四

在app.vue中引入font.css

<style lang="scss">   @import './assets/font/font.css';   #app {     font-family: 'PingFang-RE';     font-weight: 400;   } </style>

全局自定义字体,提高项目字体美化

我们在项目开发时.或多或少 会给项目 添加全局字体;

添加字体的最佳方案,请看