• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

battlesnake/gulp-google-webfonts: JS: Google-webfont Gulp-plugin

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

battlesnake/gulp-google-webfonts

开源软件地址(OpenSource Url):

https://github.com/battlesnake/gulp-google-webfonts

开源编程语言(OpenSource Language):

JavaScript 83.4%

开源软件介绍(OpenSource Introduction):

gulp-google-webfonts

A gulp plugin to download Google webfonts and generate a stylesheet for them.

Note: The examples seem to have issues with Gulp v4.

Example #1

Input

fonts.list

# Tab-delimeted format
Oswald	400,700	latin,latin-ext

# Google format
Roboto:500,500italic&subset=greek

gulpfile.js

var gulp = require('gulp');
var googleWebFonts = require('../');

var options = { };

gulp.task('fonts', function () {
	return gulp.src('./fonts.list')
		.pipe(googleWebFonts(options))
		.pipe(gulp.dest('out/fonts'))
		;
	});

gulp.task('default', ['fonts']);

Output

gulp fonts

out/fonts/

fonts.css
Oswald-normal-400.woff
Oswald-normal-700.woff
Roboto-italic-500.woff
Roboto-normal-500.woff

out/fonts/fonts.css

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	src: url(Oswald-normal-400.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	src: url(Oswald-normal-700.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 500;
	src: url(Roboto-italic-500.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	src: url(Roboto-normal-500.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

Options

The googleWebFonts object can take the following options:

  • fontsDir - The path the output fonts should be under. (Note: the path is relative to gulp.dest)
  • cssDir - The path the output css should be under. (Note: the path is relative to gulp.dest)
  • cssFilename - The filename of the output css file.
  • fontDisplayType - The css font display type (Default: auto)

Example #2

Input (other inputs same as example #1)

gulpfile.js

var gulp = require('gulp');
var googleWebFonts = require('../');

var options = {
	fontsDir: 'googlefonts/',
	cssDir: 'googlecss/',
	cssFilename: 'myGoogleFonts.css'
};

gulp.task('fonts', function () {
	return gulp.src('./fonts.list')
		.pipe(googleWebFonts(options))
		.pipe(gulp.dest('out/fonts'))
		;
	});

gulp.task('default', ['fonts']);

Output

gulp fonts

out/

./fonts/googlefonts/Oswald-normal-400.woff
./fonts/googlefonts/Oswald-normal-700.woff
./fonts/googlefonts/Roboto-normal-500.woff
./fonts/googlefonts/Roboto-italic-500.woff
./fonts/googlecss/myGoogleFonts.css

Example #3

Input (other inputs same as example #1)

gulpfile.js

var gulp = require('gulp');
var googleWebFonts = require('../');

var options = {
	fontsDir: 'googlefonts/',
	cssDir: 'googlecss/',
	cssFilename: 'myGoogleFonts.css',
  relativePaths: true
};

gulp.task('fonts', function () {
	return gulp.src('./fonts.list')
		.pipe(googleWebFonts(options))
		.pipe(gulp.dest('out/fonts'))
		;
	});

gulp.task('default', ['fonts']);

Output

gulp fonts

out/

./css/fonts.css
./fonts/Lato-normal-300.woff
./fonts/googlefonts/Oswald-normal-400.woff
./fonts/googlefonts/Oswald-normal-700.woff
./fonts/googlefonts/Roboto-normal-500.woff
./fonts/googlefonts/Roboto-italic-500.woff
./fonts/Roboto-normal-400.woff
./fonts/Lato-normal-400.woff
./fonts/googlecss/myGoogleFonts.css
./fonts/Lato-italic-400.woff

Example #4

Command-line usage

Input

Makefile

PATH := ./node_modules/.bin:$(PATH)

out := out

fonts_list := fonts.list
fonts_dir := fonts
css_dir := css
css_filename := fonts.css

.PHONY: default fonts clean

default: fonts

clean:
	rm -rf -- $(out)

fonts:
	google-webfonts < $(fonts_list) --out-base-dir $(out) --fonts-dir $(fonts_dir) --css-dir $(css_dir) --css-filename $(css_filename)

fonts.list

Lato	300,400,400italic	latin,greek
Roboto	400					latin,latin-ext

Output

make

out/

./css/fonts.css
./fonts/Lato-normal-300.woff
./fonts/Roboto-normal-400.woff
./fonts/Lato-normal-400.woff
./fonts/Lato-italic-400.woff

out/css/fonts.css

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	src: url(fonts/fonts/Lato-italic-400.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
	src: url(fonts/fonts/Lato-normal-300.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/fonts/Lato-normal-400.woff) format('woff');
	unicode-range: U+0-10FFFF;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url(fonts/fonts/Roboto-normal-400.woff) format('woff');
	unicode-range: U+0-10FFFF;
}



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap