博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Web-Fontmin -- 在线提取你需要的字体
阅读量:7019 次
发布时间:2019-06-28

本文共 1850 字,大约阅读时间需要 6 分钟。

关于@font-face

是中的一个模块,使用 @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 格式的字体。常用的工具是 ,一个字体生成器,可以在线生成 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: 
}});

详细介绍和用法可以看这篇文章:

基于 Fontmin 的工具

  • - Fontmin 桌面版 App,需下载安装使用

  • - Fontmin 的 Gulp 插件

  • - 自动分析页面使用的 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:

Github 地址:

网页效果:

page-1

page-2

常用免费字体网站

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

博客原文:

转载地址:http://vadxl.baihongyu.com/

你可能感兴趣的文章
RHEL 网络的简单配置
查看>>
新机开源经历
查看>>
JavaScript 在对象中声明的函数的递归调用
查看>>
第十三天内容《基础交换十三》小牛配置思路
查看>>
[解决后端使用ceph qem性能问题](升级kvm后使用virt-type=kvm(qemu-system-x86_64、qemu-kvm、qemu-img)...
查看>>
DevOps在完成大量资料学习后我总结了一下
查看>>
(Mac)VMware Fusion 安装centos ,mac访问不了centos里的web服务器解决方案
查看>>
android 实现保存图片到相册
查看>>
centos 最小化安装后安装vmtools故障后解决方法
查看>>
jquery $(document).ready() 与window.onload的区别
查看>>
Spring-rabbit 消息的接收与发送 配置及实例
查看>>
Response.setContentType()常用参数对应说明
查看>>
kubernetes 中的 Service
查看>>
Windroy—在Windows上运行Android系统
查看>>
读书计划
查看>>
想了解迅雷亲历面试的经历吗:笔试+上机+面试
查看>>
媒体查询
查看>>
手机分辨率有哪些
查看>>
MongoDB的分片集群的安装
查看>>
GuozhongCrawler系列教程 (4) StartContext详解
查看>>