精华内容
下载资源
问答
  • ttf2woff2 将TTF文件转换为WOFF2的文件。 这是Google 项目的包装器。 如果C ++包装器编译失败,则会 。 用法 命令行界面 全局安装ttf2woff2 ,然后: cat font.ttf | ttf2woff2 > font.woff2 原料药 var fs = ...
  • woff2-parser WOFF2字体解析器 安装 npm install woff2 - parser 用法 var fs = require ( 'fs' ) ; var parser = require ( 'woff2-parser' ) ; fs . readFile ( 'font.woff2' , function ( err , contents ...
  • 这是一个基本的Web应用程序,允许用户查看woff或woff2 Webfont的字形。 用户在其硬盘驱动器上选择一种Web字体,然后该应用程序显示该字体的所有选定glpyh。 我为这件事情对我来说很好而感到自豪,但是为了重新整理...
  • WoffToTtf转换器 该转换器将woff和woff2字体转换为ttf,反之亦然。
  • woff2ttf 将 WOFF (web) 字体转换为 TrueType (ttf) 格式 例子 <?php $woffFile = 'awesome_font.woff'; $ttfFile = 'awesome_font.ttf'; WOFF2TTF::convert($woffFile, $ttfFile);
  • 提供了四个字重的压缩版,font-family 定义如下: 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-简 中黑体 font-family: PingFang...
  • 思源黑体、Source Han Sans、Noto Sans SC、 web woff2 字体
  • 提供了六个字重的多版本,font-family 定义如下: 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 细体 font-family: PingFangSC-Light, sans-serif; 苹方-简 中黑体 font-family: PingFang...
  • 解决Web部署 svg、woff、woff2字体 404错误 ,解决Web部署 svg、woff、woff2字体 404错误
  • woff2otf 这是一个小的实用程序,用于将WOFF文件转换为OTF字体格式。 它使用Python 3,因此您需要先安装它才能运行它。 用法 要运行脚本,只需在命令行中调用它即可: ./woff2otf.py font.woff font.otf 第一个...
  • materialize.woff2

    2021-08-29 09:00:36
    materialize 使用的 google 开源图标字体
  • 网页字体msyh.woff2、msyh.woff、msyh.ttf、msyh.eot、msyh.svg
  • gulp-base64-webfont-css Gulp 插件从 woff 和 woff2 文件生成带有 Base64 编码字体数据的 css 文件
  • 目前移动端webfont字体使用越来越广泛,由于缺少比较好的自动化工具,开发者在修改字体图标时需要在2个平台进行转换(svg转ttf再转woff2,woff2普遍不支持)才能完成字体生成工作。 经过调研,基于改造成fis插件,实现...
  • 诺托·塞里夫(Noto Serif)SC 针对本地主机的优化CSS文件和字体文件。 在NPM上可用: : 字型粗细 字体名称 CSS字体粗细 额外的光 200 光 300 常规的 400(默认) 中等的 ... 单个CSS: : Serif+SC:
  • woff2-功能测试 WOFF2字体格式的简单功能测试。 在 用例 假设我们 ,我们需要一种以编程方式确定浏览器是否支持WOFF2格式的方法。 var fontFile = "/url/to/woff.css"; // Use WOFF2 if supported if( ...
  • 和声2 D2Coding 网页字体 由 ...woff2 ttf svg(来自 1.2.1) 描述 字体为Naver发行的韩国开发字体。 它是一种基于著名的 Nanum Barun Gothic 字体为开发人员编码而优化的字体,不仅考虑了字符之间
  • wariableFont.github.io 演示成功的woff2可变字体转换
  • 前端开源库-gulp-ttf2woff2gulp-ttf2woff2,从ttf字体创建woff2字体
  • 纯C#字体阅读,字形布局和渲染。 在开发PixelFarm渲染库时,我认为从字体渲染字形的方法可能对其他库很有用。 因此,我分拆了纯C#字体阅读,字形布局和渲染的方法。 在开发PixelFarm渲染库时,我认为从字体渲染...
  • woff2-源码

    2021-04-01 06:05:39
    这是字体压缩参考代码的自述文件。 此存储库中有几个与压缩相关的...cd woff2 make clean all 或者,如果您的系统上已经安装了Brotli,则可以使用CMake构建可执行文件和库: git clone https://github.com/google/wof
  • 它支持带有CFF和TrueType轮廓的字体,并且可以读取包装为WOFF和WOFF2的字体。 当前支持以下OpenType表: CMAP(仅格式0、4、12和13) 头 he 最大 hmtx 名称 OS / 2 邮政 GSUB(不包括LookupType 5、6、7和8)...
  • 您可以使用该库读取字体文件(.ttf,.otf,.ttc,.otc,.woff,.woff2)和 访问。 根据布局字体字形。 核心模块(Typography.OpenFont,Typography.GlyphLayout)不提供字形渲染实现。 但是,由于您能够访问和...
  • 由iconfont引起的svg、ttf、woff、woff2图标的研究及其转换 1.背景 其实很早之前便想通过iconfont来实现图标管理和统一(一方面也是为了偷懒,不,是工程化),然而总总原因拖到了现在。 个人感觉iconfont最大的...

    由iconfont引起的svg、ttf、woff、woff2图标的研究及其转换

    1.背景

    其实很早之前便想通过iconfont来实现图标管理和统一(一方面也是为了偷懒,不,是工程化),然而总总原因拖到了现在。

    个人感觉iconfont最大的优势有三点
    - 矢量图标。相比切图,至少不会糊。
    - 可控颜色。相比切图,至少可以换颜色。
    - 方便管理和调用。相比切图,至少不会忘。
    - 减少请求。所有的图标只用一个请求。

    在畅快得使用之后,其原理便引起了我的好奇心…

    1.1 iconfont

    iconfont官方网址:http://www.iconfont.cn/

    阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

    1.2 icomoon

    icomoon官方网址:https://icomoon.io

    例子:demo

    2 对比

    2.1 结果包

    iconfont

    我们整理好下载下来的图标结果目录如图所示,
    - 其中三个html是三种使用方式的demo,其优势和对比在页面里有具体描述,考虑到语义化和兼容,我使用了fontclass这种形式;
    - “iconfont.svg”是图标库的svg格式文件;
    - “iconfont.eot”,“iconfont.ttf”,“iconfont.woff”的图标库的字体格式文件;

    2.2 svg、eot、ttf、woff比较

    注意,这里的SVG指的是svg字体。

    2.2.1 介绍

    SVG / SVGZ

    SVG(Scalable Vector Graphics),即矢量图,是用于描述二维矢量图形的一种图形格式。在 Web 中使用 SVG 可以解决位图放大失真的问题。

    TTF / OTF

    TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。部分的因为这种格式容易被非法复制,因此催生了后来的WOFF字体格式。

    EOT

    EOT(Embedded Open Type),是微软创造的字体格式。这种格式只在IE6-IE8里使用。

    WOFF

    WOFF(Web Open Font Format)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。WOFF字体通常比其它字体加载要快,因为使用了OTF和TTF字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。

    WOFF2(*)

    WOFF2(Web Open Font Format 2.0),相比woff最大的优化应该是加强了字体的压缩比。

    2.2.2 大小

    iconfont size

    woff2(*) < woff < ttf ≈ eot < svg

    从请求量上来看,woff\woff2格式的图标库最小

    2.2.3 兼容

    @font-face:

    基本全兼容
    font-face兼容

    svgfont:

    ios、safari及低端安卓兼容
    svgfont兼容

    eot:

    只有IE
    eot兼容

    ttf:

    基本兼容,IE兼容情况不是很好
    ttf兼容

    woff:

    IE9+,android4.4+,其他兼容良好
    woff兼容

    woff2(*):

    除IE及低系统移动端,其他兼容情况较好
    woff2兼容

    从上图来看
    - font-face支持情况良好,完全可以使用字体形式来实现图标;
    - PC上兼容较好的是woff格式,ttf对IE的兼容情况不容乐观,svgfont只对Safari兼容,而eot只对IE兼容,如果要做到兼容IE8需要结合eot混着用;
    - 移动上eot完全不兼容,svgfont低端系统能很好兼容但不知道为何高端安卓不再支持,考虑到厂里较特殊的兼容要求(ios8.0,android4.0),最为合适的看来就是woff及ttf格式了。

    结合大小和兼容情况来看,可以优先使用woff格式(要兼容安卓4.0的话优先使用ttf),如果要兼容IE低版本的话需要使用eot格式,正如iconfont.css的处理:

    @font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1532589026137'); /* IE9*/
      src: url('iconfont.eot?t=1532589026137#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUkAAsAAAAAB4AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW70ftY21hcAAAAYAAAABcAAABhplABr5nbHlmAAAB3AAAAVgAAAFsZoj2dmhlYWQAAAM0AAAALwAAADYSH23BaGhlYQAAA2QAAAAgAAAAJAfgA4NobXR4AAADhAAAAAwAAAAMC+kAAGxvY2EAAAOQAAAACAAAAAgAdgC2bWF4cAAAA5gAAAAfAAAAIAESAF1uYW1lAAADuAAAAUUAAAJtPlT+fXBvc3QAAAUAAAAAIgAAADPge++EeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sE4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxjYm7438AQw9zI0AgUZgTJAQAjlgxweJzFkMENgDAMAy9p6QMxCA8G4sUcnbhrFBPKgwlqybHiWEoUYAGSeIgZ7MJ4cMq18BNr+DkyRWo4tXnv6j9VRLMS6iqFabB5q//You6j01eogzqx+Uv8BlHvC5d4nA2PrU7DUABG73dLu3Zs7e7tf7d1a7vtQoCFtWWIhWEwEAQJCkXwDEcwJIAgQSB4ABAQEhwOh+JNCLwCjhT65Ygjz0dkQv4+pXfJIyZZICOyRfYIgbKEWKdtRCIf0iXYkWy7li6JRESVJB5KG3BjxXLScT5wlYpiQEeILErHYkgF1vIpnSB12oDfDPZ5v8WlO1Q9EV4XO/QJdidpGdOVYnt500q7pnpW49zn/FZVZFmldM7QMXMdTdaqSvEsG4H93lmkHdR8Eewe1LtNfnSTn7T7rgZcXsJsdvWXTRawkvPAMblfadRVL6gnPQtn3/OeWWsPvkg5Wn69mIN0RXpEEKJhEFeg2JYzAbPCMplNsZ6FcFlWCsvS8aCfjaSfIlZdrQhrrD6ze6utU1jGq2HhJRniWGf09w14w4emFtMqN8zioTNedPHIHMBhxSFygXuv2SD/wk87NXicY2BkYGAA4kPBpYHx/DZfGbhZGEDgev2URwj6fz0LI3MjkMvBwAQSBQA9GQs1AHicY2BkYGBu+N/AEMPCwMDw/z8LIwNQBAUwAwBx8QRrBAAAAAPpAAAEAAAAAAAAAAB2ALZ4nGNgZGBgYGYIZGBlAAEmIOYCQgaG/2A+AwAQ9wFwAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgJmRiZGZkYWBsYK1KqO0MpWBAQASpALPAAA=') format('woff'),
      url('iconfont.ttf?t=1532589026137') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('iconfont.svg?t=1532589026137#iconfont') format('svg'); /* iOS 4.1- */
    }

    3 转换

    据美丽大方的UI小姐姐描述,在iconfont平台上要生成一套字体图标,UI所需要上传的是图标的svg文件。那么生成包里的svg图标库的来源就很清晰了——最简单的方式就是把UI上传的svg文件进行处理。那么问题也来了,其余的ttf/eot/woff字体文件是如何生成的呢?

    此节转换过程由nodejs实现,只讲实现不知道原理,不感冒的同学可直接跳过~

    • 目录结构:
      ├─dist 生成图标地址
      ├─node_modules
      ├─src 源文件
      │ └─svg
      ├─index.html 测试html
      ├─index.js node脚本
      └─package.json

    3.1 转换为svgfont

    例子

    脚本(index.js):

        const join = require('path').join;
        const fs = require('fs');
        const SVGIcons2SVGFontStream = require('svgicons2svgfont');
    
        const DIST_PATH = join(__dirname, 'dist/iconfont.svg');
    
    
        // init
        const fontStream = new SVGIcons2SVGFontStream({
          fontName: 'iconfont'      // 字体名(font-family)
        });
    
        // 设置导出svgfont文件
        fontStream.pipe(fs.createWriteStream(DIST_PATH))     // 导出的svgfont文件路径
          .on('finish', function() {     // 完成
            console.log(`SvgFont successfully created!(${DIST_PATH})`)
          })
          .on('error', function(err) {   // 错误
            console.log(err);
          });
    
        // add icon1
        const glyph1 = fs.createReadStream(join(__dirname, 'src/svg/ad-1.svg'));    // svg路径
        glyph1.metadata = {
          unicode: ['\uE001'],    // unicode
          name: 'icon1'                 // icon名
        };
        fontStream.write(glyph1);
    
        // add icon2
        const glyph2 = fs.createReadStream(join(__dirname, 'src/svg/add-pluss-1.svg'));
        glyph2.metadata = {
          unicode: ['\uE002'],
          name: 'icon2'
        };
        fontStream.write(glyph2);
    
        fontStream.end();   // end

    执行: node index
    svgfont cmd
    可以在dist目录下看到生成的“iconfont.svg”文件

    查看svg源码:
    svg源码

    使用(index.html):

        <style type="text/css">
            @font-face {font-family: "iconfont";
                src: url('dist/iconfont.svg#iconfont') format('svg');
            }
            .u-iconfont{
                display: inline-block;
                font-family:"iconfont" !important;
                font-size:26px;
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    
        <h1>iconfont——svgfont</h1>
        <div>
            <em class="u-iconfont">&#xE001;</em>
            <em class="u-iconfont">&#xE002;</em>
        </div>

    页面展示:
    svgfont result

    3.2 svgfont转ttf

    • 依赖包:svg2ttf
    • 准备工作:svgfont文件

    例子

    脚本(index.js):

        const fs = require('fs');
        const join = require('path').join;
        const svg2ttf = require('svg2ttf');
    
        const DIST_PATH = join(__dirname, 'dist/iconfont.ttf');     // 输出地址
    
        let ttf = svg2ttf(fs.readFileSync(join(__dirname, 'dist/iconfont.svg'), 'utf8'), {});
        fs.writeFile(DIST_PATH, new Buffer(ttf.buffer), (err, data) => {
            if (err) {
                console.log(err);
                return false;
            }
    
            console.log(`Ttf icon successfully created!(${DIST_PATH})`)
        });

    使用(index.html):

        <style type="text/css">
            @font-face {font-family: "iconfont";
                src: url('dist/iconfont.ttf#iconfont') format('truetype');
            }
            .u-iconfont{
                display: inline-block;
                font-family:"iconfont" !important;
                font-size:26px;
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    
        <h1>iconfont——svgfont</h1>
        <div>
            <em class="u-iconfont">&#xE001;</em>
            <em class="u-iconfont">&#xE002;</em>
        </div>

    执行: node index
    ttf cmd
    可以在dist目录下看到生成的“iconfont.ttf”文件

    页面展示:
    ttf result

    3.3 ttf转eot

    • 依赖包:ttf2eot
    • 准备工作:ttf文件

    脚本(index.js):

        const fs = require('fs');
        const join = require('path').join;
        const ttf2eot = require('ttf2eot');
    
        const DIST_PATH = join(__dirname, 'dist/iconfont.eot');     // 输出地址
    
        let ttf = fs.readFileSync(join(__dirname, 'dist/iconfont.ttf'));
    
        let eot = new Buffer(ttf2eot(ttf).buffer);
    
        fs.writeFile(DIST_PATH, eot, (err, data) => {
            if (err) {
                console.log(err);
                return false;
            }
    
            console.log(`Eot icon successfully created!(${DIST_PATH})`)
        });

    使用(index.html):

        <style type="text/css">
            @font-face {font-family: "iconfont";
                src: url('dist/iconfont.eot'); /* IE9*/
                src: url('dist/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
            }
            .u-iconfont{
                display: inline-block;
                font-family:"iconfont" !important;
                font-size:26px;
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    
        <h1>iconfont——eot</h1>
        <div>
            <em class="u-iconfont">&#xE001;</em>
            <em class="u-iconfont">&#xE002;</em>
        </div>

    执行: node index
    eot cmd
    可以在dist目录下看到生成的“iconfont.eot”文件

    页面展示(IE):
    eot result

    3.3 ttf转woff

    • 依赖包:ttf2woff
    • 准备工作:ttf文件

    脚本(index.js):

        const fs = require('fs');
        const join = require('path').join;
        const ttf2woff = require('ttf2woff');
    
        const DIST_PATH = join(__dirname, 'dist/iconfont.woff');     // 输出地址
    
        let ttf = fs.readFileSync(join(__dirname, 'dist/iconfont.ttf'));
    
        let woff = new Buffer(ttf2woff(ttf).buffer);
    
        fs.writeFile(DIST_PATH, woff, (err, data) => {
            if (err) {
                console.log(err);
                return false;
            }
    
            console.log(`Woff icon successfully created!(${DIST_PATH})`)
        });

    使用(index.html):

        <style type="text/css">
            @font-face {font-family: "iconfont";
                src: url('dist/iconfont.woff#iconfont') format('woff');
            }
            .u-iconfont{
                display: inline-block;
                font-family:"iconfont" !important;
                font-size:26px;
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    
        <h1>iconfont——woff</h1>
        <div>
            <em class="u-iconfont">&#xE001;</em>
            <em class="u-iconfont">&#xE002;</em>
        </div>

    执行: node index
    woff cmd
    可以在dist目录下看到生成的“iconfont.woff”文件

    页面展示:
    woff result

    3.4 ttf转WOFF2(*)

    • 依赖包:ttf2woff2
    • 准备工作:ttf文件

    脚本(index.js):

        const fs = require('fs');
        const join = require('path').join;
        const ttf2woff2 = require('ttf2woff2');
    
        const DIST_PATH = join(__dirname, 'dist/iconfont.woff');     // 输出地址
    
        let ttf = fs.readFileSync(join(__dirname, 'dist/iconfont.ttf'));
    
        let woff2 = new Buffer(ttf2woff2(ttf).buffer);
    
        fs.writeFile(DIST_PATH, woff2, (err, data) => {
            if (err) {
                console.log(err);
                return false;
            }
    
            console.log(`Woff2 icon successfully created!(${DIST_PATH})`)
        });

    使用(index.html):

        <style type="text/css">
            @font-face {font-family: "iconfont";
                src: url('dist/iconfont.woff2#iconfont') format('woff2');
            }
            .u-iconfont{
                display: inline-block;
                font-family:"iconfont" !important;
                font-size:26px;
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    
        <h1>iconfont——woff2</h1>
        <div>
            <em class="u-iconfont">&#xE001;</em>
            <em class="u-iconfont">&#xE002;</em>
        </div>

    执行: node index
    woff2 cmd
    可以在dist目录下看到生成的“iconfont.woff2”文件

    页面展示:
    woff2 result

    4 svgs2fonts

    结合以上的插件,自己撸了个批量转换的包。——svgs2fonts: svg图标转字体图标库(svgs -> svg,ttf,eot,woff,woff2)。

    原理很简单:

        svgs -> svg font > ttf > eot/woff/woff2

    4.1 安装使用

    安装:

        npm i -g svgs2fonts

    验证:

        svgs2fonts -v

    使用:

    cmd
        svgs2fonts {{srcpath}} {{distpath}} --options
    • srcpath: svg源文件路径(相对当前窗口环境),传”“时为当前窗口路径;
    • distpath: 导出路径,默认在源文件路径下;
    nodejs
    const svgs2fonts = require('svgs2fonts');
        const join = require('path').join;
    
        svgs2fonts.init({
            src: __dirname,     // svg path
            dist: join(__dirname, 'dest'),  // output path
            fontName: 'myIconfont', // font name
            startNumber: 20000  // unicode start number
            nodemo: true        // no demo html files
        });

    example

        svgs2fonts svg dist

    参数

    -n / –name

    图标库的名字(default: “iconfont”).

    example

        svgs2fonts svg dist -n myiconfont
    –number

    unicode起始编码(default: 10000).

    example

        svgs2fonts svg dist --number 50000
    –nodemo

    不要demo html.

    example

        svgs2fonts svg dist --nodemo

    生成结果:
    svgs2fonts

    • demo_fontclass.html:使用class展示的demo页面;
    • demo_unicode.html:使用unicode展示的demo页面;

    >>文本博客地址
    有建议或想砸鸡蛋可 -> michealwayne@163.com


    参考资料:

    展开全文
  • S6uyw4BMUTPHjx4wXg.woff2

    2018-08-09 15:37:41
    pinpoint web中使用到的S6uyw4BMUTPHjx4wXg.woff2字体。
  • is-woff2 检查缓冲区/ Uint8Array是否为woff2文件 安装 $ npm install --save is-woff2 用法 const read = require ( 'fs' ) . readFileSync ; const isWoff2 = require ( 'is-woff2' ) ; isWoff2 ( read ( '...
  • 由IconFont引起的svg、ttf、woff、woff2图标的研究及转换 IconFont是从css3支持@font-face开始的,来看看优缺点: –优点 矢量图标:不会缩放失真; 灵活可控:无论大小、颜色(可以添加如color、hover、filter...

    由IconFont引起的svg、ttf、woff、woff2图标的研究及转换

    IconFont是从css3支持 @font-face 开始的,来看看优缺点:

    –优点

    • 矢量图标:不会缩放失真;
    • 灵活可控:无论大小、颜色(可以添加如color、hover、filter、text-shadow、transform等各种文字效果)
    • 兼容性好:兼容低版本浏览器。
    • 加载文件体积小;
    • 减少请求:所有的图标只用一个请求。

    –缺点

    • 单色:只能被渲染成单色,或者是CSS3的渐变色
    • 成本高:制作门槛高,耗时长,维护成本也很高。

    但总体来说,优点大于缺点的(不然怎么会被大量使用呢 ^_^)。

    2、制作网站:

    我们先来看看哪些网站支持制作和导出下载:

    2.1 iconfont

    • 官网:https://www.iconfont.cn
    • 阿里妈妈MUX倾力打造的矢量图标管理、交流平台。
    • 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。
    • 这也是官网的自我介绍。

    2.2 icomoon

    • 官网:https://icomoon.io/
    • 貌似是一个国外网址,具体没玩过(个人英语水平不好),应该也没iconfont好用。

    本文/本人从iconfont开始玩起。
    制作教程很多,个人觉得MUI有篇文章不错(当然,适用平台不一样,只要看部分就好)

    3、文件结构与介绍

    制作下载后,结构如下:
    IconFont制作结构图
    看文档是按需要挑文件,但也是一脸懵逼,为啥有这么多文件呢?其它文件用来干啥的?(本人是“十万个为什么”,哈哈)

    3.1 demo_index.html 和 demo.css

    使用方式的demo,其优势和对比在页面里有具体描述。类似于说明文档。

    3.2 svg / svgz

    SVG(Scalable Vector Graphics),即矢量图,是用于描述二维矢量图形的一种图形格式。在 Web 中使用 SVG 可以解决位图放大失真的问题。

    其实,.svg文件就是一个xml文件:

    • svg文件就是一个xml,定义了文字属性,位置等信息。
    • svg教程
    • 例子:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    		"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
    <svg>
    	<circle glyph-name="warning" unicode="&#59343;" 
    		cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
    </svg>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.3 ttf / otf

    TTF(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。部分的因为这种格式容易被非法复制,因此催生了后来的WOFF字体格式。

    3.4 eot

    EOT(Embedded Open Type),是微软创造的字体格式。这种格式只在IE6-IE8里使用。

    3.5 woff

    WOFF(Web Open Font Format)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。WOFF字体通常比其它字体加载要快,因为使用了OTF和TTF字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。

    3.6 woff2(*)

    WOFF2(Web Open Font Format 2.0),相比woff最大的优化应该是加强了字体的压缩比。

    3.7 js+css

    这个就不用说了吧~

    4、文件大小与兼容性

    4.1 文件大小:

    • woff2(*) < woff < ttf ≈ eot < svg
    • 从请求量上来看,woff\woff2格式的图标库最小

    4.2 浏览器兼容性:

    以下兼容性图片来自于网络

    @font-face:

    基本全兼容
    @font-face

    svg:

    ios、safari及低端安卓兼容
    svg

    eot:

    只有IE
    eot

    ttf:

    基本兼容,IE兼容情况不是很好
    ttf

    woff:

    IE9+,android4.4+,其他兼容良好
    woff

    woff2(*):

    除IE及低系统移动端,其他兼容情况较好
    woff2*

    从上图来看

    • font-face支持情况良好,完全可以使用字体形式来实现图标;
    • PC上兼容较好的是woff格式,ttf对IE的兼容情况不容乐观,svgfont只对Safari兼容,而eot只对IE兼容,如果要做到兼容IE8需要结合eot混着用;
    • 移动上eot完全不兼容,svgfont低端系统能很好兼容但不知道为何高端安卓不再支持,考虑到厂里较特殊的兼容要求(ios8.0,android4.0),最为合适的看来就是woff及ttf格式了。

    结合大小和兼容情况来看,可以优先使用woff格式(要兼容安卓4.0的话优先使用ttf),如果要兼容IE低版本的话需要使用eot格式,正如iconfont.css的处理:

    @font-face {font-family: "iconfont";
      src: url('iconfont.eot?t=1555049840333'); /* IE9 */
      src: url('iconfont.eot?t=1555049840333#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;') format('woff2'),
      url('iconfont.woff?t=1555049840333') format('woff'),
      url('iconfont.ttf?t=1555049840333') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('iconfont.svg?t=1555049840333#iconfont') format('svg'); /* iOS 4.1- */
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    5、转换

    iconfont文件互转有以下好的网站:

    5.1 批量合并系统

    本人想做的一个 对iconfont批量合并的系统

    • 背景:本人刚接手一个项目,里面有iconfont,结构都还完整,有一天需求想改两个图标(大量使用)。
    • 过程:然后,剩下我一个人在风中瑟瑟发抖。要实现,就需要新增两个图标,然后从网站上下载zip,再在项目里一个一个页面改class和引入新的css文件。
    • 想法:
      1.引入css(css引入所有用到的ttf等文件)
      2.ttf等文件可以通过svg转换,也就是说,如果要改一个图标,只要改svg,然后转换即可
      3.而如果要新增图标,只要在iconfont官网制作并下载zip,然后合并svg文件(在svg里加一个glyph),然后再在css里定义.icon-xxx:before { content:"\xxxx";}即可使用了(转换)。
      4.如何处理和合并svg文件呢?
    • 合并svg:
      1.用EditPlus或文本编辑器打开.svg文件发现,svg就是一个xml文件吖。
      2.那么流程就清楚啦,只要合并xml内容就行了。
    • 整理:
      1.用户指定原svg文件和原css文件,然后再从iconfot制作下载要合并的svg文件。
      2.提交后后台就有两个svg文件了,后台以原svg文件为主,读取新svg文件的glyph标签,并处理其glyph-name=“music” unicode="&#xf001;" 两个属性。(原文件产生两个map,用于解决重复)
      3.判断重复,有重复就提示,没重复就合并到原svg文件。
      4.仔细看前缀,在css文件追加 .x=前缀-x=glyph-name:before { content:“x=unicode”;}
      5.比如前缀是icon,name=music,unicode=&#xf001;,就追加 .icon-music:before { content:"&#xf001";}
      6.这样,用户就得到了新的svg和css文件啦
      7.用户手动将svg到转换网站转换,就能得到新的一个完整结构啦。
      8.不动原svg或css内容的原因是,可能原来图标就有被使用了,不能随意更改。
    • 最后:
      1.本系统主要是在合并环节。----如有可能,可以增加转换环节(有人说node.js可以)。
      2.做得好的话,还可以将图标显示出来,用户决定去留。

    6、附件

    6.1 坑?

    搜索了十几个网站和文章,看到有人说iconfont有坑,特留文如下:

    接下面我们再来说说Iconfont在使用过程中可能遇到的各种坑。

    • 字体图标在一些浏览器下会遇到被加粗的问题,设置-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;解决。
    • 跨域访问不到字体,由于怕字体版权得不到保护,默认跨域的字体文件是访问不到的,一般通过服务器设置 Access-Control-Allow-Origin指定自己需要的网站和设置同域来解决这个问题。
    • 不要包含没有使用的@font-face,IE将部分他是否使用,统统加载下来。万恶的IE。
    • @font-face声明之前,如果有script标签的话,直到字体文件完成下载之前,IE将都不会渲染任何东西。

    有兴趣的同学可以去坑里面走一圈,自己试试坑的深浅。博主就介绍在这里,如果有错误还望大家指出,共同学习。

    6.2 x

    xx


    觉得可以,记得右上角点赞哦!如有不正确的地方,欢迎各位大神指教!

    【The End】

    展开全文
  • woff2字体文件浏览器兼容性(2019.07.23) 结论 对比总结我们就会发现,尽管 .woff 文件由于历史原因,许多旧设备的浏览器并不支持,但是考虑当前兼容情况和文件大小的优势,在进行移动Web开发时,我们可以优先考虑...

    在做移动开发的时候,UI设计师会提供一些定制字体,来提高产品的视觉效果。对于前端开发来说,就需要考虑字体文件的兼容性和文件的大小,在尽量保证UI效果的情况下,兼容更多的浏览器,减少资源体积,使UI效果、兼容性、性能三者达到平衡。由于中文字体字符集的限制,最终字体包文件都会很大,这里不做讨论。下面主要介绍英文、数字符号场景下几种常见的字体格式。

    .ttf
    TrueType,是Type 1(Adobe公司开发)的竞品,由苹果公司和微软一起开发,是mac系统和window系统用的最广泛的字体,一般从网上下载的字体文件都是ttf格式,点击就能安装到系统上。

    .otf
    OpenType,TrueType是OpenType的前身,90年代微软寻求苹果的GX排版技术授权失败,被逼自创武功取名为TrueType Open,后来随着计算机的发展,排版技术上需要更加具有表现力的字体,Adobe和微软合作开发了一款新的字体糅合了Type 1和TrueType Open的底层技术,取名为OpenType。后来OpenType被ISO组织接受为标准,称之为Open Font Format(off)。

    .eot
    Embedded Open Type,主要用于早期版本的IE,微软根据OpenType做了压缩,重新取名为Embedded OpenType,是其专有格式,带有版权保护和压缩。ttf和otf字体在web端来说兼容相对较好,除IE和早期的ios safari和Android不怎么支持外,其他浏览器都兼容都不错。但是由于ttf和otf体积过大,在桌面浏览器的时代还可以满足需求,到了移动浏览器的时代,动辄5MB、10MB的字体文件就显得过于庞大了。因此微软在OpenType的基础上进行了优化压缩,相比OpenType大大减少了体积,但是除了IE以外的浏览器都不太支持,因此也没有成为行业标准。


    .woff
    Web Open Font Format,可以看作是ttf的再封装,加入了压缩和字体来源信息,通常比ttf小40%。在2010年4月8日,Mozilla基金会、Opera软件公司和微软提交WOFF之后,万维网联盟发表评论指,希望WOFF不久能成为所有浏览器都支持的、“单一、可互操作的(字体)格式”。2010年7月27日,万维网联盟将WOFF作为工作草案发布。也是当前web字体的主流格式。


    woff字体文件浏览器兼容性(2019.07.23)


    .woff2
    Web Open Font Format 2.0,相比woff最大的优化应该是加强了字体的压缩比。相同字体内容下,woff2比woff要小20%到30%。

     
    woff2字体文件浏览器兼容性(2019.07.23)

    结论
    对比总结我们就会发现,尽管 .woff 文件由于历史原因,许多旧设备的浏览器并不支持,但是考虑当前兼容情况和文件大小的优势,在进行移动Web开发时,我们可以优先考虑使用.woff2,如果需要兼容更多的低版本设备,再考虑使用.woff。

    参考资料:

       网页字体优化

       WOFF 2.0 评估报告

       浏览器兼容性查询

       Web开放字体格式Wiki

       2018年的@font-face


    ————————————————
    版权声明:本文为CSDN博主「black-heart」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/mrqingyu/article/details/96995760

    展开全文
  • iconfont --> ttf 依赖包 svg2ttf npm install -g svg2ttf ...var svg2ttf = require('svg2ttf'); var ttf = svg2ttf(fs.readFileSync('myfont.svg', 'utf8'), {}); fs.writeFileSync('myfont.ttf', ne

    iconfont --> ttf

    • 依赖包 svg2ttf

      npm install -g svg2ttf

    • 使用示例

      svg2ttf fontello.svg fontello.ttf

      var fs = require('fs');
      var svg2ttf = require('svg2ttf');
      
      var ttf = svg2ttf(fs.readFileSync('myfont.svg', 'utf8'), {});
      fs.writeFileSync('myfont.ttf', new Buffer(ttf.buffer));
      

    ttf --> eot

    • 依赖包 ttf2eot

      npm install -g ttf2eot

    • 使用示例

      ttf2eot fontello.ttf fontello.eot
      ttf2eot < fontello.ttf > fontello.eot

    ttf --> woff

    • 依赖包 ttf2woff

      npm install -g ttf2woff

    • 使用示例

      ttf2woff fontello.ttf fontello.woff

    ttf --> woff2

    • 依赖包 ttf2woff2

      npm install -g ttf2woff2

    • 使用示例

      cat font.ttf | ttf2woff2 >> font.woff2

      var fs = require('fs');
      var ttf2woff2 = require('ttf2woff2');
      var input = fs.readFileSync('font.ttf');
      fs.writeFileSync('font.woff2', ttf2woff2(input));
      

    svgs --> fonts

    • 依赖包 svgs2fonts

      npm i -g svgs2fonts

    • 使用示例

      svgs2fonts {{srcpath}} {{distpath}} --options

    svgions --> svgfont

    • 依赖包 svgicons2svgfont

      npm install -g svgicon2svgfont

    • 使用示例

      svgicons2svgfont --fontname=hello -o font/destination/file.svg icons/directory/*.svg

      const SVGIcons2SVGFontStream = require('svgicons2svgfont');
      const fs = require('fs');
      const fontStream = new SVGIcons2SVGFontStream({
        fontName: 'hello'
      });
      
      // Setting the font destination
      fontStream.pipe(fs.createWriteStream('fonts/hello.svg'))
        .on('finish',function() {
          console.log('Font successfully created!')
        })
        .on('error',function(err) {
          console.log(err);
        });
      
      // Writing glyphs
      const glyph1 = fs.createReadStream('icons/icon1.svg');
      glyph1.metadata = {
        unicode: ['\uE001\uE002'],
        name: 'icon1'
      };
      fontStream.write(glyph1);
      // Multiple unicode values are possible
      const glyph2 = fs.createReadStream('icons/icon1.svg');
      glyph2.metadata = {
        unicode: ['\uE002', '\uEA02'],
        name: 'icon2'
      };
      fontStream.write(glyph2);
      // Either ligatures are available
      const glyph3 = fs.createReadStream('icons/icon1.svg');
      glyph3.metadata = {
        unicode: ['\uE001\uE002'],
        name: 'icon1-icon2'
      };
      fontStream.write(glyph3);
      
      // Do not forget to end the stream
      fontStream.end();
      

    文章参考链接
    由iconfont引起的svg、ttf、woff、woff2图标的研究及转换(svgs2fonts)

    展开全文
  • woff2用于node.js(通过WebAssembly) Google使用WebAssembly为node.js构建的 。 为什么这比二进制绑定更好: 无需重建即可在任何地方工作 安装 npm install wawoff2 使用范例 const wawoff = require ( 'wawoff2'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,151
精华内容 8,460
关键字:

woff2