开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用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自定义字体了。

推荐的腾讯云相关产品：无

相关搜索:css使用自定义字体 Sass -使用材质腹板组件设置字体系列 SwiftUI自定义字体-所有字体类型都使用新字体为什么我的Sass在使用Gulp时没有出现？使用gulp + foundation时出错(sass版本)使用gulp 4.0.2创建gulp-sass任务(2.0.0)使用Gulp、PostCSS和PurgeCSS的小型SASS 使用Sass自定义页眉样式使用自定义字体如何为gulp sass编译器添加自动重新加载到gulp文件？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vite——如何配置使用sass

前言如果只是纯粹的使用其实并不需要配置，只需要安装对应的处理器依赖即可，如果需要做全局的配置可以查看 css预处理选项配置；文档: css预处理器 | css预处理选项配置内容vite 提供了对 .scss..., .sass, .less, .styl 和 .stylus 文件的内置支持。...没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：# .scss and .sassnpm add -D sass# .lessnpm add -D less# .styl and....stylusnpm add -D stylus如果使用的是单文件组件，可以通过（或其他预处理器）自动开启。

2040 0

Flutter 使用自定义字体

导入字体随便在网上找一个免费的字体，下载下来会得到一个后缀为.ttf的文件，即字体文件。或者自己做一个。...引用字体在pubspec.yaml文件中配置字体 ......family: mononoki fonts: - asset: fonts/mononoki-Regular.ttf weight: 500 family：字体名称...asset：字体路径 weight：比重（400相当于normal，700相当于bold）使用字体 child: Text( "wanandroid_flutter...style: TextStyle(fontSize: 25, fontFamily: 'mononoki'), ), Text的style中有一个fontFamily属性，参数即字体的名称

1.1K1 0

给初学者的Gulp教程（译）

如果你足够疯狂，你甚至可以使用Gulp创造一个静态页面生成器（我已经做到了！）。所以，Gulp是非常强大的，但是如果你想创建你自己的构建流程，你就要去学习如何使用Gulp。...最主要的区别是你如何使用他们配置工作流。Gulp配置倾向于更短和更简单，相对于Grunt。Gulp也倾向于运行更快。...node-modules.png 我们差不多可以开始使用Gulp来工作了，在我们做这个之前，我们还要了解我们如何在项目中使用Gulp，以及确定项目的目录结构。...，你或许要在imagemin中增加选项，来自定义如何压缩文件。...我们需要做的就是将字体复制到dist。我们可以使用Gulp复制文件通过gulp.src和gulp.dest，不需要其他插件。

4.3K2 0

vue 使用自定义字体

1.1 引入字体到 Vue 项目 1.1.1 创建字体文件夹在 static 文件夹下创建 font 文件夹。并将下载好的字体拷贝到文件夹下。...1.1.2 创建字体样式文件(CSS) @font-face { font-family: 'numberFont'; // 自定义字体名称 src: url("..../number.ttf"); // 字体的路径，后缀 ttf 一定能要小写，否则可能找不到字体文件 } 1.2 使用字体样式 1.2.1 在所需页面应用相应字体样式 @import.../static/font/font.css"; 1.2.2 使用字体 6690802 ?

1.6K2 0

如何在vue中使用sass

使用sass，我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev...node-sass 修改style标签打开目录中的xxx.vue文件。...然后修改 style标签如下如果出现错误提示：无效的css。因为sass语法不使用大括号和分号。...如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。如果你希望使用带大括号的语法，即SCSS 那么，你只要把lang="sass"改成lang="scss"就行了。

1.1K8 0

css使用自定义字体教程

开源字体库站长字体 --字体资源丰富 fontke --字体资源丰富阿里inconfont --阿里图标库的字体，就是字体比较少使用字体文件一般下载的字体文件是.ttf格式，也有的是woff...、woff2、otf等定义字体 css文件使用@font-face定义一个字体： font-family必写，为字体随便起一个名字 src必写，字体文件的路径 font-display选填，建议写上，...字体文件加载完成前是否显示原生字体 1@font-face { 2 font-family: "font"; 3 src: url("..../assets/font/HarmonyOS_Sans_SC_Medium.subset.woff2"); 4 font-display: swap; 5} 使用字体定义好字体之后，在需要使用的元素上...汉仪霹雳体简全站--- 鸿蒙字体

1.2K2 0

使用SASS做个可自定义主题的网页

使用SASS做个可自定义主题的网页 Posted November 28, 2018 本篇的代码已托管在 jackeyGao / sass-theme ---- Sass 是对 CSS 的扩展，让 CSS...它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。...Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。...具体的 Sass 语法教学这里并不准备讲，请参考官方教程，本篇只举一个自定义主题的例子，让你对 sass 的功能更加深刻，理解 sass 在这个场景的优越性....我们开始本篇的东西准备首先安装 Sass ，这是一个 ruby 的工具，使用 gem 可以快速安装.

2.4K2 0

Fabric.js 使用自定义字体

这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。...学习本文前，你必须有一点 Fabric.js 的基础，如果没了解过 Fabric.js 可以阅读一下《Fabric.js 从入门到膨胀》创建文本时设置字体在 Fabric.js 中使用自定义字体库时...在本例中，我使用 IText 创建文本，在创建时通过它的 fontFamily 属性就可以设置自定义字体。...') }) } 精简字体库关于 Fabric.js 如何使用自定义字体库的内容说完了，但日常工作中我还遇到一个问题：某些特定地方会使用一些特殊字体，比如数字、项目名等地方...⭐ Fabric.js 使用自定义字体

5232 0

Android O：使用自定义字体资源

前言 Android O中的新功能之一是使用自定义字体资源。在这篇文章中，我们一起来看看如何在我们的应用程序中使用它们。在Android O之前，在我们的应用中使用自定义字体有多困难？...我们有两个选择： 1、编写自定义view 2、使用lib引入第三方字体字体资源入门 Android O通过字体资源支持自定义字体。在app / res文件夹中新建文件夹， ?...我们将要创建的.png 在Android O中使用自定义字体资源对于这篇Android O的文章，我将从Google字体中选择我的字体。...自定义字体样式.png 如果您使用的是字体系列，则会有相同的字体，权重不同。你知道我在说什么，如果你下载一个字体并解压缩.zip文件，你会得到这样的多种字体变体。 ?...使用自定义字体资源只是Android O中的新功能之一。您可以在这里阅读其他Android O功能。快乐工作，享受编程！

2.4K3 0

在网页中使用自定义字体

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问...我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的...，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。...，即后面font-family使用的名称，fontName指的是你的字体文件的名称。...从上面几个浏览器的支持性可以看出如果想兼容主流浏览器但是一个字体文件肯定是不行的了，需要多个字体文件来配合使用以达到兼容的效果。

1.8K1 0

使用Gulp进行JavaScript自动化简易说明书

通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。来源：gulp详细入门教程 ?...在这个JavaScript自动化教程中，你将会学到如何使用 Gulp自动化你的设计和开发流程。如果你更加面向设计，我鼓励你克服你的任何恐惧读下去。...此外，Gulp官方社区在 npm 有一个 huge plugin directory ，可以帮助完成从JavaScript连接到通过svg创建图标字体（ icon fonts ）等。...它使用一个名为 gulp-sass插件，这个插件基于libsass。我在这里选择使用libsass，因为它比Ruby的替代方法更快，尽管它缺少一些功能。...var gulp = require('gulp'); var scss = require('gulp-sass'); 一开始我们需要初始化我们将要使用的所有插件。

3.2K1 0

从零开始构建你的 Gulp

，删除注释，优化字体权重，丢弃重复的样式规则，优化 calc()，压缩选择器，减少手写属性，合并规则 postcss-font-magician 使用自定义字体 // styles.js const gulp...}); 图片我们之前介绍过 Less 在 Gulp 的用法，这里再贴一下 Sass 的部分，相对于直接将 Sass 转换成 CSS，我们还加入了 PostCSS 的一些插件 // sass.js const.../config').sass; gulp.task('sass',() => { const processors = [ autoprefixer, cssnano...]; return gulp.src(config.src) .pipe(sass().on('error',sass.logError))...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面，更重要的是，可以同时在 PC、平板、手机等设备下进项调试，我们可以使用 Browsersync 提供的静态服务器，对我们的

1K4 0

Gulp 自动化构建案例

yarn add gulp --dev 复制代码安装完毕之后我们就开始进入正题样式编译首先我们使用gulp进行scss的样式编译 gulpfile.js const { src, dest }...gulp-sass --save-dev 复制代码然后我们再进行一下改造 gulpfile.js const { src, dest } = require('gulp') const sass...复制代码这样我们就可以把我们在网页中写死的数据放入，就可以进行一些模板的渲染了图片和字体压缩这里我们要进行图片的压缩： yarn add gulp-imagemin --dev // 这里有一个坑点...('gulp-swig') // 图片、svg压缩 const imagemin = require('gulp-imagemin'); 复制代码这样的引用我们都可以使用plugins.xxx进行使用...，像sass我们就可以直接plugins.sass(),plugins.imagemin()等等例如 gulp-sass就是plugins.sass，如果是gulp-sass-sass这种类型，就是

1.4K2 0

使用Cufon技术实现Web自定义字体

在网页设计中，设计师会在设计中加入一些特殊效果的字体以使得页面更加美观，然而访问者的系统一般都是没有安装这些特殊字体的，所以使用font-family属性来定义这些特殊字体是行不通的，于是人们想出了很多解决方案...简单的说，Cufon是一个用来替代sIFR（更早期的一种自定义字体实现方案）框架，实现在网页中对文字字体进行渲染功能的纯JavaScript开源类库。...这里说的字体文件是Cufon字体文件，这是使用 Cufon 技术的另一个关键所在。...JavaScript 2.文本无法被选中 3.无法实现悬停变换效果 Cufon技术在主流浏览器中的兼容性情况如下表所示： 5+ 1.5+ 1.0+ 3.0+ 9.5+ 总结总的来说，这种实现自定义字体的方案还是比较简单的...，虽然有些不足，但也是一种兼容性相对比较好的方案，个人觉得将来CSS3的@font-face更有可能成为实现网页自定义字体的主要方法。

9080 0

如何使用SASS编写可重用的CSS

Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷： Sass 也是 Bootstrap 4 运行的基础。...这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的，而不是覆盖代码(这是大多数开发人员的定制方法)。理解Sass可以更好地理解源代码级别的工具。...当使用CSS时，我们经常在一个全局环境设置，这样可能会错误地设置元素的样式。 自定义CSS(即使有CSS变量)仍然是非常冗余的。...我们还将通过演示示例来了解为什么要使用这些预处理程序，演示如何将样式划分为更小的特定组件，而不必强迫用户下载大量不需要的CSS文件。...安装 sass sass 的安装方式有很多种，可以查看这个地址，这里我们使用 npm 安装： npm install -g sass CSS 存在哪些问题？

7.6K2 0

gulp+webpack工具整合简介

通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。...'), //本地安装gulp所用到的地方 less = require('gulp-less'); //定义一个testLess任务（自定义任务名称） gulp.task('testLess'...10、使用webstorm运行gulp任务 10.1、说明：使用webstorm可视化运行gulp任务； 10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show...图片字体文件加载器，file-loader： { test: /\....[ext]" } 对一些图片和字体资源进行加载，我们会把相关文件抽离出来进行名字加上hash值的前7位做了处理后的名字。

2.4K5 0

gulp+webpack工具整合简介

通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。..., //本地安装gulp所用到的地方 less = require('gulp-less'); //定义一个testLess任务（自定义任务名称） gulp.task('testLess',...10、使用webstorm运行gulp任务 10.1、说明：使用webstorm可视化运行gulp任务； 10.2、使用方法：将项目导入webstorm，右键gulpfile.js 选择”Show Gulp...图片字体文件加载器，file-loader： { test: /\....[ext]" } 对一些图片和字体资源进行加载，我们会把相关文件抽离出来进行名字加上hash值的前7位做了处理后的名字。

1.5K8 0

npm依赖(构建编译)

: 项目构建 gulp-cli: Gulp依赖 n: Node版本管理 node: JS引擎 npm: 依赖管理 nrm: NPM镜像管理 nvm: Node版本管理 parcel: 项目构建 require...打包模块分析编译工具 babel: JS编译 browserslist: 浏览器内核 csscomb: CSS排序 cssnano: CSS压缩 eslint: JS校验 font-spider: 字体压缩...font-spider-plus: 字体压缩(升级版) happypack: 并行处理 less: CSS编译 node-sass: Sass引擎 postcss: CSS编译 posthtml: HTML...: 项目构建 gulp-cli: Gulp依赖 n: Node版本管理 node: JS引擎 npm: 依赖管理 nrm: NPM镜像管理 nvm: Node版本管理 parcel: 项目构建 require...font-spider-plus: 字体压缩(升级版) happypack: 并行处理 less: CSS编译 node-sass: Sass引擎 postcss: CSS编译 posthtml: HTML

2K5 0

如何在React Native中添加自定义字体

向 React Native CLI 项目添加自定义字体对于我们的项目，我们将研究如何通过构建使用Google字体的基础应用程序，将自定义字体添加到React Native CLI项目中。...在这个教程中，我们将使用VS Code。一旦项目已经启动，我们将继续获取我们想要使用的字体。我们将讨论如何导入它们并在我们的项目中使用它们。...让我们看看输出：在Expo中使用自定义字体的React Native 在这一部分，我们将学习如何在Expo中使用自定义字体。...在React Native中使用自定义字体时常见的陷阱在React Native中使用自定义字体时，你可能会遇到一些缺点：字体族名称不匹配：如前文所述，确保字体族名称一致性至关重要。...使用不受支持的字体格式：在使用自定义字体时，验证你正在使用的系统（iOS，Android 或网页）是否支持你正在使用的字体格式（例如，.ttf，.otf）非常重要。

3691 0

Gulp使用指南

准备使用 gulp + 作用: 帮我们打包自己的项目 1....) + fonts 字体图标文件 2....=> 直接再管道函数里面使用, 需要传递参数 -> { browsers: [要兼容的浏览器] } 3. gulp-sass => 下载: npm i gulp-sass -D...=https://npm.taobao.org/mirrors/node-sass/ => 单独配置一个下载地址, 只有下载 node-sass 的时候会使用 -> 过程...3. $ npm i gulp-sass -D => 导入: const sass = require('gulp-sass') => 导入以后得到一个可以处理流文件的函数, 直接再管道函数里面执行就可以了

8981 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭