[PostCss] Easily Load Google Fonts with PostCSS Font Magician
Configuring Google Fonts can be quite an annoying process to setup. Using Font Magician with PostCSS allows you simply generate proper @font-face declarations simply by writing the Google Font that you're expecting. Want Merriweather? Simply type font-family: "Merriweather"
and Font Magician will generate everything you need.
Install:
npm i poi postcss postcss-font-magician -D
Config:
const magician = require('postcss-font-magician'); module.exports = {
plugins: [
magician({
variants: {
'Merriweather': {
'300': [],
'400': []
},
'Nunito': {
'300': [],
'400': []
}
}
})
]
};
Use:
* {
font-family: "Merriweather";
}
h1 {
font-family: 'Nunito';
}
Build:
poi build
After build, we will get css file, which can be used in your project
[PostCss] Easily Load Google Fonts with PostCSS Font Magician的更多相关文章
- Get Started with the Google Fonts API
Get Started with the Google Fonts API This guide explains how to use the Google Fonts API to add fon ...
- Google css & Google fonts
最近用某开源模板做提案的时候, 抓包工具老是有外部Request. 问题出在某css中有这么一句: @import url(https://fonts.googleapis.com/css?famil ...
- 使用 Google Fonts 为网页添加美观字体
前言 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息,同时吸引用户来产生兴趣. 说到字体,我们首先会想到 CSS 里面的 font,例如: & ...
- 使用Google Fonts注意事项
Google Fonts是一个字体嵌入服务库. 这包括免费和开源字体系列.用于浏览库的交互式 Web 目录以及用于通过 CSS 和 Android 使用字体的 API. Google 字体库中的流行字 ...
- google fonts 国内使用解决方案
由于众所周知的原因,国内使用google font库有很大的问题. 解决方案1:使用国内镜像如360网站卫士常用前端公共库CDN服务 优点:使用方便 缺点:目标用户包含国外的开发者,不清楚国外用户的加 ...
- bootstrap之google fonts
bootstrap之google fonts 在学习一个bootstrap时,看到了一行引用代码:@import url(http://fonts.googleapis.com/css?family= ...
- (转)Google Fonts 的介绍与使用
转载自“前端笔记” http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html Google Fonts 是什么?(以下翻译为 ...
- 前端 CDNJS 库及 Google Fonts、Ajax 和 Gravatar 国内加速服务
由于某些众所周知的原因,好多开源的 JS 库采用的国外 CDN 托管方式在国内访问速度不如人意.所以我们特意制作了这个公益项目,托管了 CDNJS 的所有开源 JS 库以及反代了 Google Fon ...
- webpack 解决 semantic ui 中 google fonts 引用的问题
semantic ui css 的第一行引用了 google web font api,由于不可告人而又众所周知的原因,这条链接在国内无法访问: @import url('https://fonts. ...
随机推荐
- 重设数据文件大小sql语句
set verify off column file_name format a50 word_wrapped column smallest format 999,990 heading " ...
- javascript 异或运算符实现简单的密码加密功能
写在前面的 当我们需要在数据库中存储用户的密码时,当然是不能明文存储的. 我们就是介绍一下用^运算符来实现简单的密码加密以及解密功能 上代码 首先,回顾一下基础知识. String.fromCharc ...
- GUI 图形用户界面 [学习笔记]
今晚返璞归真了一把, 系统了解了一下GUI的有关知识: GUI(Graphical User Interface) 图形用户界面 是指采用图形方式显示的计算机操作用户接口.与早期计算机使用的命令行界面 ...
- Base64编码字符串时数据量明显变大
那就是当把byte[]通过Convert.ToBase64String转换成Base64编码字符串时数据量明显变大 Base64编码的思想是是采用64个基本的ASCII码字符对数据进行重新编码.它将需 ...
- KVM 日常使用命令
[root@Eren liwm]# ps ax | grep kvm 681 ? S< 0:00 [kvm-irqfd-clean]17597 pts/0 S+ ...
- thttpd 在S3C6410的移植-web服务程序的应用
1. 在VMWare 虚拟机上将arm-linux-gcc 4.3.1配置好:2. 下载thttpd软件包并解压:3. 在thttpd根目录下运行: ./configure:4. ...
- python+selenium进行简单验证码获取
# _*_ coding:utf-8 _*_from PIL import Imagefrom selenium import webdriverimport pytesseractimport ti ...
- 紫书 习题 8-1 UVa 1149(贪心)
排序之后, 尽量最小和最大的放在一个背包, 放不下就放最大的. #include<cstdio> #include<algorithm> #define REP(i, a, b ...
- C语言过程活动记录
C 语言自动提供的服务之一就是跟踪调用链——哪些函数调用了哪些函数,当下一个return语句执行后,控制将返回何处等.解决这个问题的经典机制是堆栈中的活动记录. 当每个函数被调用时,都会产生一个过程记 ...
- js 函数基础(方便复习使用)
// 函数声明: function bbq(){ // ..... } // 函数表达式: // 1.命名函数表达式 var test = function abc(){ document.write ...