写样式文件
在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里面新建一些文本工具类
- 文本溢出省略处理
.text-ellipsis {overflow: hidden; /* 隐藏溢出的文本 */text-overflow: ellipsis; /* 用省略号表示被截断的文本 */white-space: nowrap; /* 文本不换行 */
}
使用场景：当文本内容超出容器宽度时显示省略号，比如：
<div class="text-ellipsis" style="width: 200px">这是一段很长的文本内容，超出部分会显示省略号...
</div>- 多行文本省略
.text-ellipsis-2 {display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 显示2行 */overflow: hidden;
}
使用场景：文章摘要、产品描述等需要显示固定行数的场景
- 文本换行处理
.text-break-word {word-wrap: break-word; /* 允许在单词内换行 */word-break: break-all; /* 允许在任意字符间换行 */
}
使用场景：处理长单词或URL导致的布局溢出问题
- 文本对齐
.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";`}}}
}
这段配置的作用和含义：
additionalData: 这个选项会在每个 SCSS 文件的开头自动注入指定的内容- 相当于在每个使用 SCSS 的组件文件前都自动添加了
@import "@/styles/fonts.scss" - 这样你就可以在任何组件中直接使用 fonts.scss 中定义的变量和 mixin，而不需要手动导入
- 相当于在每个使用 SCSS 的组件文件前都自动添加了
- 实际效果就像在每个组件的 style 标签中都自动添加了：
<style lang="scss">
@import "@/styles/fonts.scss"; // 自动注入
.your-component {// 这里可以直接使用 fonts.scss 中的变量和 mixinfont-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>
