vue全局字体大小如何调整
时间: 2025-06-08 07:21:24 浏览: 23
### Vue 全局设置字体大小的方法
#### 方法一:通过 CSS 文件全局应用自定义字体并调整字体大小
为了实现全局字体大小的调整,可以在 `src` 目录下创建一个专门用于存储样式资源的文件夹,并在此文件夹内创建一个新的 CSS 文件来引入字体和设定基础样式。
```css
/* assets/css/global_styles.css */
@font-face {
font-family: "meet";
src: url('../fonts/meet.ttf');
font-weight: normal;
font-style: normal;
}
body {
font-family: "meet", sans-serif;
font-size: 16px; /* 设置默认字体大小 */
}
```
接着,在项目的入口组件 `App.vue` 中导入这个 CSS 文件:
```html
<style>
@import "./assets/css/global_styles.css";
</style>
```
这种方法不仅能够确保整个应用程序都使用指定的字体,还可以方便地统一管理字体大小和其他样式属性[^1]。
#### 方法二:利用 SASS 和 REM 单位动态控制字体大小
另一种更为灵活的方式是采用相对单位(如 rem),并通过预处理器比如 SASS 来简化尺寸计算过程。这种方式允许更轻松地响应不同屏幕分辨率下的设计需求。
首先安装 node-sass 或者 sass-loader 插件以便支持 .scss 文件编译。之后可以按照下面的例子修改根级 HTML 的字体大小作为基准值:
```scss
// main.scss
$base-font-size: 100px;
html {
font-size: $base-font-size;
}
body {
font-family: 'meet', sans-serif;
font-size: calc(1em / ($base-font-size / 16)); // 调整为标准浏览器默认大小 (通常为16px)
}
```
这里的关键在于将 html 标签内的 `font-size` 设定成较大的数值(例如这里的 100px)。这样做可以让后续所有的 rem 计算变得简单直观——只需考虑相对于这 100 基准的比例关系即可[^2]。
阅读全文
相关推荐


















