nuxt 2 第三方字体 引入 阿里妈妈 数黑体

Nuxt.js 2 添加艺术字体的步骤如下：

1. 下载字体： 首先选择你喜欢的艺术字体，并下载对应的字体文件（通常是 .ttf 或 .otf 格式）。

2. 创建字体目录： 在根目录下新建一个文件夹，命名为 fonts，用于存放字体文件。

3. 设置字体样式： 在你的 CSS 或 SCSS 文件中，使用 @font-face 规则来导入字体文件并定义字体的名称。我这儿是font.css示例：

@font-face {
  font-family: 'Alimama ShuHeiTi';
  font-weight: 700;
  src: url('../fonts/AlimamaShuHeiTi-Bold.woff') format('woff');
  font-display: swap;
}

4. 用字体： 指定 font-family 属性就可以使用这个艺术字体。示例：

全局加载：

export default {
    // other configurations 
    css: [ '~/assets/css/font.css' ],
}

局部组件加载：

<style lang="scss">
@import url('~@/assets/css/font.css');
.my-text {
    display: inline-block;
    font-family: Alimama ShuHeiTi;
    font-size: 44px;
}
</style>

使用：

.my-text {
    display: inline-block;
    font-family: Alimama ShuHeiTi;
    font-size: 44px;
    font-weight: bold;
    line-height: 52px;
    letter-spacing: 0px;
    font-variation-settings: 'opsz' auto;
    background: linear-gradient(91deg, #2f3c7c 0%, #02060b 93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

5. 重启项目： 确保新的字体文件被正确加载和应用