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

derek_334892 发布于2019-08-30 12:52 / 2043人阅读

摘要：在上面的代码片段可以看出，要兼容性好的使用，我们同时需要格式的字体。不单止可以转换格式同时支持中文，还可以提取字体，并且有更快的上传和转换速度。拥有的所有功能，并且在线即可用。

关于@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个作用：

提取部分字体

转换字体格式

生成 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:  }
});

详细介绍和用法可以看这篇文章： 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 构建的字体工具，它的用处只有两个：

提取字体

字体格式转换

通俗的理解，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

网页效果：

常用免费字体网站

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

Google fonts

Dafont

Typekit

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

GPU云服务器云服务器你理解的html 现在发现你的优势有你短信是免费的吗说说你所了解的人工智能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115123.html

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

摘要：在上面的代码片段可以看出，要兼容性好的使用，我们同时需要格式的字体。不单止可以转换格式同时支持中文，还可以提取字体，并且有更快的上传和转换速度。拥有的所有功能，并且在线即可用。关于@font-face @font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片...

ephererid 2019-08-19 17:51 评论0 收藏1
SimpleMDE编辑器 + 提取HTML + 美化输出

摘要：不过的缩进，是个无情的痛，会呼吸的痛。使用方法在输出的地方加上的类即可下面的代码是给编辑器预览输出的容器加的。这几天在帮公司内部弄编辑器，之前是用wangEditor富文本编辑器的，也不能说别人插件不好什么的，毕竟我是写不出来的。不过wangEditor的缩进，是个无情的痛，会呼吸的痛。因此我找到了一款好用的markown编辑器——simpleMDE 可能你会跟我说，哟？那Edit...

elliott_hu 2019-08-20 16:39 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Pocher 2019-08-19 17:37 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Michael_Lin 2019-08-30 12:47 评论0 收藏0
非常实用的在线工具网站清单

摘要：文章目录在线图片压缩在线压缩最好用的切图工具在线工具一键抠图免费字体免费素材图片和视频中国风配色网站免费壁纸免费短连接在线在线代码编辑在线流程图思维导图在线图片压缩传送门在线图片压缩网站已经优化超过十亿张图片，支持，，等格式的图片的压缩。 ...

XanaHopper 2021-11-18 10:02 评论0 收藏0