vue2项目如何规范整个项目的字体

写样式文件

在src/styles下新建一个font.scss文件，可以区分开发环境和生产环境写两个文件，然后里面定义不同的字体、不同的字体相关属性

可以定义一个公共路径的变量来简化url的书写

// 1. 声明字体家族
@font-face {
  font-family: 'PingFang SC';
  src: local('PingFang SC'),
       url('@/assets/fonts/PingFang-SC-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; // 优化字体加载策略
}

// 2. 定义字体变量
$font-family-base: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
$font-family-code: 'Source Code Pro', Menlo, Monaco, Consolas, monospace;

// 3. 定义字体大小变量
$font-size-base: 14px;
$font-size-lg: 16px;
$font-size-sm: 12px;
$font-size-xs: 10px;
$font-size-title: 20px;

// 4. 定义字重变量
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;

// 5. 定义行高变量
$line-height-base: 1.5;
$line-height-lg: 1.8;
$line-height-sm: 1.2;

还可以新建一些混入，写好一些字体的样式

@mixin text-primary {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-normal;
  line-height: $line-height-base;
  color: #333333;
}

@mixin text-title {
  font-family: $font-family-base;
  font-size: $font-size-title;
  font-weight: $font-weight-bold;
  line-height: $line-height-lg;
  color: #000000;
}

@mixin text-small {
  font-family: $font-family-base;
  font-size: $font-size-sm;
  font-weight: $font-weight-normal;
  line-height: $line-height-sm;
  color: #666666;
}

还可以在src/styles/font.scss里面新建一些文本工具类

1. 文本溢出省略处理

.text-ellipsis {
  overflow: hidden;        /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
  white-space: nowrap;     /* 文本不换行 */
}

使用场景：当文本内容超出容器宽度时显示省略号，比如：

<div class="text-ellipsis" style="width: 200px">
  这是一段很长的文本内容，超出部分会显示省略号...
</div>

2. 多行文本省略

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* 显示2行 */
  overflow: hidden;
}

使用场景：文章摘要、产品描述等需要显示固定行数的场景

3. 文本换行处理

.text-break-word {
  word-wrap: break-word;   /* 允许在单词内换行 */
  word-break: break-all;   /* 允许在任意字符间换行 */
}

使用场景：处理长单词或URL导致的布局溢出问题

4. 文本对齐

.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

配置

在main.js里面配置

import '@/styles/fonts.scss'

在vue.config.j里面配置

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/fonts.scss";`
      }
    }
  }
}

这段配置的作用和含义：

1. additionalData: 这个选项会在每个 SCSS 文件的开头自动注入指定的内容
   • 相当于在每个使用 SCSS 的组件文件前都自动添加了 @import "@/styles/fonts.scss"
   • 这样你就可以在任何组件中直接使用 fonts.scss 中定义的变量和 mixin，而不需要手动导入
2. 实际效果就像在每个组件的 style 标签中都自动添加了：

<style lang="scss">
@import "@/styles/fonts.scss";  // 自动注入
.your-component {
  // 这里可以直接使用 fonts.scss 中的变量和 mixin
  font-size: $font-size-base;
  @include text-primary;
}
</style>

不配置的话，你需要在每个需要使用这些变量的组件中手动导入

<!-- 不配置的话，你需要在每个需要使用这些变量的组件中手动导入 -->
<style lang="scss">
@import "@/styles/fonts.scss";  // 需要手动添加
.component { ... }
</style>

使用

这个是使用定义好的类

<template>
  <div class="article">
    <h1 class="article-title">文章标题</h1>
    <p class="article-content">文章内容</p>
    <div class="article-info text-ellipsis">附加信息</div>
  </div>
</template>

<style lang="scss" scoped>
  .article {
    &-title {
      @include text-title;
    }

    &-content {
      @include text-primary;
    }

    &-info {
      @include text-small;
    }
  }
</style>

这个就是拆出来用

<template>
  <div>
    <!-- 文本超出显示省略号 -->
    <div class="product-title text-ellipsis">
      这是一个很长的产品标题...
    </div>
    
    <!-- 使用预定义字体样式并添加省略号 -->
    <div class="description text-ellipsis">
      产品描述内容
    </div>
  </div>
</template>

<style lang="scss" scoped>
.product-title {
  @include text-title;
  width: 200px; // 限制宽度才能看到省略号效果
}

.description {
  @include text-primary;
  width: 300px;
}
</style>

<style lang="scss" scoped>
.custom-style {
  font-family: $font-family-base;
  font-size: $font-size-lg;
  font-weight: $font-weight-bold;
  line-height: $line-height-lg;
  
  // 可以添加其他样式
  color: #333;
  margin-bottom: 16px;
}
</style>