怎么在本地引入字体

在前端项目中引入阿里巴巴普惠体的步骤如下：

1. 准备字体文件

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 = false

new 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;
}

注意事项

1. 路径正确性 ：

   @ 符号默认指向 src 目录，字体文件路径需正确（如 ../fonts/xxx 是从 styles 目录到 fonts 目录的相对路径）。

2. 构建兼容性 ：

   使用 webpack 构建，已默认配置 url-loader 处理字体文件，无需额外配置，直接引入即可。

3. 版权说明 ：

   阿里巴巴普惠体可免费用于商业和非商业场景，但建议遵守官方版权要求。

4. 字体加载优化 ：

   优先保留 .woff2 格式（体积最小），其他格式作为兼容备选，减少加载时间。

完成后重启项目（npm run dev），字体即可生效。