Web-Fontmin -- 在线提取你需要的字体

关于@font-face

@font-faceCSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你可能见过类似下面的代码片段,它可以让 @font-face 兼容所有浏览器。

[@font-face](/user/font-face) {
    font-family: "SentyZHAO";
    src: url("/fonts/SentyZHAO.eot"); /* IE9 */
    src: url("/fonts/SentyZHAO.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("/fonts/SentyZHAO.woff") format("woff"), /* chrome, firefox */

    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("/fonts/SentyZHAO.ttf") format("truetype"), 
    url("/fonts/SentyZHAO.svg#SentyZHAO") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

Webfont Generator - Font Squirrel

在上面的代码片段可以看出,要兼容性好的使用 @font-face,我们同时需要 eot 、woff、ttf、svg 格式的字体。常用的工具是 fontsquirrel,一个字体生成器,可以在线生成 eot 、woff、ttf、svg 格式的字体,相信很多前端用过,具体用法可以官网试试。

Fontmin

第一个纯 JavaScript字体子集化方案,一个百度出品的优秀工具。 Fontmin 有什么用呢?

提供了 ttf子集化,eot/woff/svg格式转换,css生成 等功能,助推 webfont 发展,提升网页文字体验。

上面是官方的说法,通俗地理解有3个作用:

  1. 提取部分字体
  2. 转换字体格式
  3. 生成 webfont 和对应 CSS 样式

Fontmin 应用场景

有时候,我们想给网站的 Logo 、 Slogan 、标题、活动页等的中文自定义字体,我们可以使用 @font-face 引入 Web 字体,但是完整的中文字体库都是 8M 10M ,加载性能非常差,所以我们提取部分我们使用到的字体,这样可以把字体文件变成几KB。

Fontmin 用法

Fontmin 的用法很简单:

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .src('fonts/*.ttf')
    .dest('build/fonts');

fontmin.run(function (err, files) {
    if (err) {
        throw err;
    }

    console.log(files[0]);
    // => { contents: <Buffer 00 01 00 ...> }
});

详细介绍和用法可以看这篇文章: http://efe.baidu.com/blog/fontmin-getting-started/

基于 Fontmin 的工具

Web-fontmin

好吧,扯了这么多,终于到文章的主题。

Web-fontmin 不是什么高大上的东西,一个基于 Fontmin 构建的字体工具,它的用处只有两个:

  1. 提取字体
  2. 字体格式转换

通俗的理解,Web-fontmin 是一个这样的工具:Squirrel + fontmin-app,他是两者的结合体。

Squirrel 只有单纯的生成不同格式的webfont,且不支持中文。Web-fontmin不单止可以转换格式同时支持中文,还可以提取字体,并且有更快的上传和转换速度。

Fontmin-app 主要作用是提取字体,需要下载安装,且不支持Linux。Web-Fontmin 拥有Fontmin-app的所有功能,并且在线即可用。

使用Web-fontmin:http://fontmin.forsigner.com/

Github 地址:web-fontmin

网页效果:

常用免费字体网站

推荐几个常用的字体下载王章:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无所事事者爱嘲笑

ios真机中Text组件出现多余边框

17240
来自专栏javascript趣味编程

2.2.5 HTML5程序调试

假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

12730
来自专栏前端菜鸟变老鸟

表格按列方向上渲染数据

如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。

8540
来自专栏GreenLeaves

JavaScript之<script>标签简介

向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性。 1、async:可选...

211100
来自专栏菜鸟前端工程师

html+css学习笔记001-常用标签

11720
来自专栏hrscy

Xcode插件-Alcatraz安装

      Alcatraz 是一个帮你管理 Xcode 插件、模版以及颜色配置的工具。它可以直接集成到 Xcode 的图形界面中,让你感觉就像在使用 Xcod...

16410
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用②TodoList上)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

26950
来自专栏vue学习

小程序 — 保存图片到手机相册

(1)要保存图片到手机相册中,所以首先我们来看看保存图片的api方法是什么? 我们使用的是wx.saveImageToPhotosAlbum(OBJECT)这...

36210
来自专栏PHP在线

CHROME开发者工具的小技巧

Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能...

367100
来自专栏IT大咖说

R语言实例:利用css对shiny页面优化及htmlwidgets创建控件

摘要 本演讲将介绍如何利用CSS对shiny页面进行个性化设计及在网页中嵌入视频;并通过一个详细案例介绍了利用htmlwidgets包开发HTML控件,基于D3...

35660

扫码关注云+社区

领取腾讯云代金券