vue调整字体实现

调整全局字体样式

在Vue项目的App.vue或全局CSS文件中定义基础字体样式：

/* 全局字体设置 */
body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

使用CSS变量动态控制字体

在:root中定义字体变量，便于统一管理：

:root {
  --main-font: 'Helvetica Neue', sans-serif;
  --title-size: 24px;
  --text-size: 14px;
}
.component {
  font-family: var(--main-font);
  font-size: var(--text-size);
}

组件内局部样式覆盖

在单文件组件中通过<style>标签修改局部字体：

<template>
  <div class="custom-text">示例文字</div>
</template>

<style scoped>
.custom-text {
  font-family: 'Georgia', serif;
  font-weight: 600;
}
</style>

动态绑定字体样式

通过Vue的响应式数据控制字体：

<template>
  <div :style="{ fontFamily: dynamicFont, fontSize: size + 'px' }">
    动态字体示例
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicFont: 'Courier New',
      size: 18
    }
  }
}
</script>

引入第三方字体

通过@font-face或CDN引入自定义字体：

/* 在CSS中定义 */
@font-face {
  font-family: 'CustomFont';
  src: url('@/assets/fonts/custom.woff2') format('woff2');
}

/* 或在index.html中通过CDN链接 */
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

响应式字体大小

使用CSS媒体查询适配不同屏幕尺寸：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}