如何使用gulp sass自定义字体

使用gulp sass自定义字体的步骤如下：

首先，确保你已经安装了Node.js和npm（Node.js的包管理器）。
在项目根目录下，使用命令行工具运行以下命令来初始化一个新的npm项目：npm init按照提示填写项目信息，生成一个package.json文件。
安装gulp和相关插件。在命令行中运行以下命令：npm install gulp gulp-sass gulp-rename --save-dev这将安装gulp、gulp-sass和gulp-rename插件，并将其添加到package.json文件的devDependencies中。
在项目根目录下创建一个名为gulpfile.js的文件，并在其中编写gulp任务。

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');

gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss') // 源文件路径
    .pipe(sass()) // 编译sass
    .pipe(rename({ extname: '.css' })) // 修改文件扩展名为.css
    .pipe(gulp.dest('dist/css')); // 输出路径
});

gulp.task('watch', function() {
  gulp.watch('src/scss/*.scss', gulp.series('sass')); // 监听文件变化
});

gulp.task('default', gulp.series('sass', 'watch')); // 默认任务

在项目根目录下创建一个名为src的文件夹，并在其中创建一个名为scss的文件夹。在scss文件夹中创建一个名为custom-font.scss的文件，并在其中定义自定义字体样式。

@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/custom-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.custom-font {
  font-family: 'CustomFont', sans-serif;
  font-size: 16px;
  color: #333;
}

在项目根目录下创建一个名为dist的文件夹，并在其中创建一个名为fonts的文件夹。将自定义字体文件custom-font.ttf放入fonts文件夹中。
运行gulp命令来执行默认任务。这将编译scss文件并将生成的css文件输出到dist/css文件夹中。

gulp

现在，你可以在HTML文件中使用自定义字体样式了：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/css/custom-font.css">
</head>
<body>
  <div class="custom-font">Hello, Custom Font!</div>
</body>
</html>

这样，你就成功地使用gulp sass自定义字体了。