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>

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

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

添加字体的最佳方案,请看 ?? ?? ?? 四步成功引入

1、创建font文件夹

在assets 静态资源文件夹中,新建font 文件夹

//目录结构
├──node_modules
├──public
├──src
├?? ?├──api?
├?? ?├──assets ? ?//静态资源
├ ? ??? ?├──images?
├ ? ??? ?├──font ? //存放 公共字体的文件夹
├ ? ??? ??? ?├──common ?//存放字体的文件夹
├ ? ??? ??? ??? ?├──weiruan.ttf
├ ? ??? ??? ??? ?├──changcheng.ttf
├ ? ??? ??? ??? ?├──songti.ttf
├ ? ??? ??? ??? ?└── ......
├ ? ??? ??? ?└──index.css
├ ? ??? ?└── css?
├?? ?├──components
├?? ?└── views
├ ......

2、创建index.css

在刚刚创建好的font 文件夹中新建index.css 存放字体样式

?? ?/*公共字体的样式 */
?? ?@font-face {
?? ? ?font-family: 'weiruan';
?? ? ?src:url('./weiruan.otf') format('otf'),?
?? ??? ? url('./changcheng.woff') format('woff'), /* Modern Browsers */
?? ? ? ? url('./songti.ttf') ?format('truetype'); /* Safari, Android, iOS */
?? ?}

3、全局注册

在脚手架中找到main.js 文件，引入我们需要全局使用的 index.css 文件

//main.js
import './assets/font/index.css' //全局使用

4、页面使用

在需要使用字体的页面，引入全局字体

?? ?div {
?? ? ??? ?font-family: weiruan; //使用字体
? ?? ?}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于Vue项目中使用自定义字体样式方式的详细内容...