如何实现Vue项目中字体大小自适应的活性字体设置？

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

目录 + Vue项目设置活性字体 + 起因 + 我们来看看详细步骤吧 + 效果 + Vue项目引入特殊字体 + 特殊字体指的是默认电脑中没有的 + Vue项目设置活性字体 + 起因 + 最近，博主在照搬UI设计稿参数编写页面

目录

• vue项目设置活性字体
• 起因
• 我们来看看详细步骤吧
• 效果
• vue项目引入特殊字体
• 特殊字体指的是默认电脑中没有的

vue项目设置活性字体

起因

最近，博主在按照ui设计稿参数编写页面之后，发现页面整体偏大，尤其是字体现实的特别大，但是在按UI设计的页面尺寸展示的时候却十分舒服，这是怎么回事，在和另一位前端交流之后，得知可以动态设置字体大小，即不同页面有不同的大小的字体十分灵活。

首先，我们要清楚字体设置比较常用的三个单位px，rem，em

• px是一个大小单位，相当于1像素，这要写死就是固定的；
• rem,em两者都是比例单位，只是相对比的对象不同：
• em是相对于父级的，父级字体设置20px，子级设置0.5em，即20* 0.5=10px,

而rem是相对于根的，根设置字体30px，我设置0.5rem，即30* 0.5=15px。