文档章节

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

forsigner
 forsigner
发布于 2016/03/14 14:55
字数 749
阅读 123
收藏 1

关于@font-face

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

@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 的工具

  • fontmin-app - Fontmin 桌面版 App,需下载安装使用
  • gulp-fontmin - Fontmin 的 Gulp 插件
  • font-spider - 自动分析页面使用的 WebFont 并进行按需压缩

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

网页效果:

page-1 page-2

常用免费字体网站

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

博客原文:http://forsigner.com/2016/03/13/web-fontmin/

© 著作权归作者所有

forsigner
粉丝 1
博文 2
码字总数 1524
作品 1
程序员
私信 提问
Android中使用SVG与WebFont矢量图标

一.参考文献 1.http://www.cnblogs.com/yes-V-can/p/5716853.html 2.http://blog.csdn.net/zhouwangling/article/details/53096649 二.html使用方法 1.下载字体 网上百度自己要使用的字体,一......

IamOkay
2015/08/23
145
0
前端引用字体@font-face的若干优化方法

1 前 言 1.1 场 景 我们在页面展示时,为了更好的效果,一般使用了自定义的字体 。 之前在开发的时候使用了一些自定义字体,这里总结下自己寻找的的一些处理办法。 本文只列出了引入本地字体...

xrk
05/22
0
0
SegmentFault D-Day 2015 武汉站

SegmentFault D-Day 介绍 2014 年 SegmentFault D-Day,5 个月,9 场技术沙龙,覆盖北京、杭州、南京上千的开发者,我们受到了越来越多的开发者的参与和肯定。这些肯定也让我们不敢减弱技术传...

文洁洁洁
2015/06/01
409
0
SegmentFault D-Day 2015 武汉站

SegmentFault D-Day 介绍 2014 年 SegmentFault D-Day,5 个月,9 场技术沙龙,覆盖北京、杭州、南京上千的开发者,我们受到了越来越多的开发者的参与和肯定。这些肯定也让我们不敢减弱技术传...

文洁洁洁
2015/06/01
17
0
如何将 Font Awesome 转成 PNG 图标

Font Awesome为Twitter Bootstrap提供了一种独一无二的图像字体.它还提供了CSS的很强的扩展性. CSS 提供了一种描述HTML的机制,可以让你自由的设计网页。 你能给Font Awesome加上各种各样的参...

oschina
2014/03/26
15.4K
16

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot Actuator监控应用

微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现异常如何快速定位便成...

zw965
6分钟前
2
0
高性能最终一致性框架Ray之基本概念原理

一、Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案。 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且让编码变得复杂和容易出错。 共享内...

程序员修BUG
6分钟前
2
0
如何去掉子集合功能中的按钮?

解决方案: 1、找到子集合字段 2、打开字段详细信息,在辅助配置里面进行配置 加入JEPaaS技术交流群,了解更多

JEPaaS云平台
7分钟前
2
0
创龙TI KeyStone C66x多核定点/浮点DSP TMS320C665x + Xilinx Artix-7 FPGA处理器;

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
10分钟前
2
0
hbuilder打包常用android权限配置

常用android权限配置 - 开启相机权限 - 允许程序通过WiFi或移动基站的方式获取用户错略的经纬度信息 - 允许程序通过GPS芯片接收卫星的定位信息 - 允许程序获取模拟定位信息,一般用于帮助开发...

小草先森
10分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部