vue调整字体实现
调整全局字体样式
在Vue项目的App.vue文件中，通过CSS设置全局字体。例如，使用font-family定义默认字体，font-size调整基础字号：
<style>
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
}
</style>使用CSS变量统一管理
在:root中定义CSS变量，便于全局复用和动态修改：
:root {
--main-font: 'Helvetica', sans-serif;
--text-size: 14px;
}
body {
font-family: var(--main-font);
font-size: var(--text-size);
}组件内局部样式
在单文件组件（.vue文件）的<style>标签中覆盖全局字体设置：
<style scoped>
.custom-text {
font-family: 'Georgia', serif;
font-size: 18px;
}
</style>动态绑定字体样式
通过Vue的响应式数据动态调整字体，结合:style或:class指令：
<template>
<div :style="{ fontFamily: selectedFont, fontSize: fontSize + 'px' }">
动态字体示例
</div>
</template>
<script>
export default {
data() {
return {
selectedFont: 'Courier New',
fontSize: 12
};
}
};
</script>引入外部字体（如Google Fonts）
在public/index.html或组件中通过<link>引入字体：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">随后在CSS中直接使用：
body {
font-family: 'Roboto', sans-serif;
}使用Sass/Less预处理器
若项目配置了Sass/Less，可通过变量管理字体：
// variables.scss
$primary-font: 'Open Sans', sans-serif;
$secondary-font: 'Lato', sans-serif;
// 在组件中引用
<style lang="scss" scoped>
.text {
font-family: $primary-font;
}
</style>响应式字体大小
结合媒体查询实现不同屏幕尺寸下的字体适配：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
