专业品牌设计网站建设网站建设实训心得
在前端项目中引入阿里巴巴普惠体的步骤如下：
1. 准备字体文件
- 将阿里巴巴普惠体的字体文件（如
.ttf、.woff、.woff2格式）放入项目的src/assets/fonts目录（若没有fonts文件夹，手动创建）：src/ └── assets/└── fonts/├── AlibabaPuHuiTi-Regular.woff2 # 推荐优先使用woff2格式（体积小、加载快）├── AlibabaPuHuiTi-Regular.woff└── AlibabaPuHuiTi-Regular.ttf提示：阿里巴巴普惠体有多个字重（如常规、粗体），如需多字重，按上述方式放入对应文件即可。
2. 定义字体样式
在全局样式目录 src/assets/styles 中，创建或修改 font.css（或 index.scss），添加字体声明：
/* src/assets/styles/font.css *//* 阿里巴巴普惠体 - 常规 */
@font-face {font-family: 'AlibabaPuHuiTi';src: url('../fonts/AlibabaPuHuiTi-Regular.woff2') format('woff2'),url('../fonts/AlibabaPuHuiTi-Regular.woff') format('woff'),url('../fonts/AlibabaPuHuiTi-Regular.ttf') format('truetype');font-weight: 400; /* 常规字重 */font-style: normal;font-display: swap; /* 优化字体加载体验，避免闪烁 */
}/* 如需粗体，添加以下声明（可选） */
@font-face {font-family: 'AlibabaPuHuiTi';src: url('../fonts/AlibabaPuHuiTi-Bold.woff2') format('woff2'),url('../fonts/AlibabaPuHuiTi-Bold.woff') format('woff'),url('../fonts/AlibabaPuHuiTi-Bold.ttf') format('truetype');font-weight: 700; /* 粗体字重 */font-style: normal;font-display: swap;
}
3. 全局引入字体样式
在入口文件 src/main.js 中引入上述字体样式，确保全项目可用：
// src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'// 引入全局样式
import '@/assets/styles/index.scss'
import '@/assets/styles/font.css' // 引入字体样式// ...其他初始化代码
Vue.config.productionTip = falsenew Vue({el: '#app',router,store,render: h => h(App)
})
4. 使用字体
方式 1：局部使用（在组件中）
在需要的 Vue 组件样式中直接使用：
<template><div class="custom-title">使用阿里巴巴普惠体的标题</div>
</template><style scoped>
.custom-title {font-family: 'AlibabaPuHuiTi', sans-serif; /* 优先使用自定义字体，sans-serif作为降级备选 */font-weight: 400; /* 常规字重 */font-size: 18px;
}.bold-text {font-family: 'AlibabaPuHuiTi', sans-serif;font-weight: 700; /* 粗体（需提前引入对应字重的字体文件） */
}
</style>
方式 2：全局使用（替换项目默认字体）
若希望全项目使用该字体，在全局样式 src/assets/styles/index.scss 中设置：
/* src/assets/styles/index.scss */
body {font-family: 'AlibabaPuHuiTi', sans-serif; /* 覆盖默认字体 */
}/* 若依的标题样式覆盖 */
h1, h2, h3, h4, h5, h6, .title {font-family: 'AlibabaPuHuiTi', sans-serif;
}
注意事项
路径正确性：
@符号默认指向src目录，字体文件路径需正确（如../fonts/xxx是从styles目录到fonts目录的相对路径）。构建兼容性：
使用 webpack 构建，已默认配置url-loader处理字体文件，无需额外配置，直接引入即可。版权说明：
阿里巴巴普惠体可免费用于商业和非商业场景，但建议遵守官方版权要求。字体加载优化：
优先保留.woff2格式（体积最小），其他格式作为兼容备选，减少加载时间。
完成后重启项目（npm run dev），字体即可生效。