woff_woff2 - CSDN
  • woff文件样式查看 http://fontstore.baidu.com/static/editor/index.html 在这个网址 上传woff文件 即可看到woff文件的展示效果 woff代码查看 woff文件可以用python的fontTools 打开 font = TTFont('...

    ##woff文件样式查看
    http://fontstore.baidu.com/static/editor/index.html
    在这个网址 上传woff文件 即可看到woff文件的展示效果
    ###woff代码查看
    woff文件可以用python的fontTools 打开

    font = TTFont('xxx.woff')    # 打开文件
    font.saveXML('xxx/6329.xml')
    font['cmap'] 映射关系unicode跟Name
    ffont['glyf'][name].coordinates 字形的轮廓信息
    

    woffxml 内容说明

    cmap 节点 存储 unicode跟 Name的映射关系
    glyf 节点存储 Nmae的字形信息

    <TTGlyph name="_#212" xMin="0" yMin="-164" xMax="996" yMax="804">
          #轮廓
          <contour>
            #点 x.y on 0表示为弧形区域 1表示矩形
            <pt x="22" y="-72" on="1"/>
            <pt x="96" y="59" on="0"/>
            <pt x="102" y="322" on="1"/>
    

    ###ps: 需要反反爬的,我这儿现成解决方案 识别率100% 速度0.01秒内 ###wechat: 见左侧列表








    展开全文
  • 如题! woff百度百科:...woff是字体文件,做网页时放到服务端,如果客户端浏览器中可以加载这个。 那么,wo...

    如题!

     

    woff百度百科:http://baike.baidu.com/link?url=toS7yqpN9VlEcO2GOEp5JEA9-TeaZgIdVqTOv7iHshsNvk-V8HtxEY0ku08TzUoDaEfRhGy_atYdr88bCHpwkK

     

    Web开放字体格式

     

    woff是字体文件,做网页时放到服务端,如果客户端浏览器中可以加载这个。

     

    那么,woff格式的字体到底用什么软件来打开和编辑?

     

    web font字体网址 http://www.youziku.com/

     

    调用web font的3种方式:http://www.youziku.com/Home/Instruction

     

     

    字体格式:

    说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体。

    一、TureTpe(.ttf)格式:

    .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

    二、OpenType(.otf)格式:

    .otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

    三、Web Open Font Format(.woff)格式:

    .woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

    四、Embedded Open Type(.eot)格式:

    .eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

    五、SVG(.svg)格式:

    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
    这就意味着在@font-face中我们至少需要.ttf,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

     

     IcoMoon——强悍的图标字体生成利器

    http://icomoon.io/app/#/select

     

     

     

    转载于:https://www.cnblogs.com/riasky/p/3508796.html

    展开全文
  • 声明:本帖子仅是用于学习用途,请勿与用于而已破坏别人网站,本人不承担法律责任。 来继续学爬虫呀!...去woff字体文件里面查找真正的数字,讲到底就是一个映射关系/查找字典。如html源码是123,去w...

    声明:本帖子仅是用于学习用途,请勿与用于恶意破坏别人网站,本人不承担法律责任。

    来继续学爬虫呀!
    很开心,竟然上榜某爬虫练习网站了!!!
    来看一下榜单
    rank-1
    rank-2
    超激动的!!但是还有两道目前个人解决不了,希望哪个大佬看到了,教教我,感谢感谢!

    前言
    简单描述一下这种手段,html源码的数字跟页面展示的数字是不一致的!当时就一脸黑人问号,嗯???
    经过分析,当前这种字体反爬机制是:通过获取指定链接的woff字体文件,然后根据html源码的数字
    去woff字体文件里面查找真正的数字,讲到底就是一个映射关系/查找字典。如html源码是123,去woff文件里面
    查找出来的是:623。好了,看到这里,你一定想说:废话讲那么多干嘛?赶紧上教程啊!!
    
    那先来看一下大致流程呗:

    分析目标网站页面(在这里我不打算贴出网站地址,请大家自己找网站练习),这里看到html源码和页面展示的数字是不一致的,如下图:
    在这里插入图片描述

    tips:
    一开始不知道是怎么下手,只能谷歌搜索字体反爬,一搜果然很多说法,有说woff文件的、有说CSS的、还有说svg曲线啥的,
    然后我就去查看Network里面的All,就发现关键字眼woff,就开始猜测可能是属于这种类型的反爬手段,接着开始干活。
    
    混淆前字体:

    在这里插入图片描述

    混淆后的字体:

    在这里插入图片描述

    找了一会,发现.woff2文件和woff文件前后不一样,然后开始着手解决

    如需下载woff文件,请点击这里, 提取码: ghnx

    但是本地打不开woff字体文件,需要借助的软件是fontcreator,这个你自己去找一下,很多破解的

    在这里插入图片描述
    但是这好像看不出什么,然后我们接着需要从另外一方面下手,重点来了》将woff文件转换为xml文件
    如下:

    import os
    import requests
    from fontTools.ttLib import TTFont
    
    base_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    
    url = "http://xxxxxx.xxx.woff"
        
    woff_dir = os.path.join(base_dir, "statics/woffs/")
    file_name = url.split("/")[-1]
    xml_name = file_name.replace(file_name.split(".")[-1], "xml")
    save_woff = os.path.join(woff_dir, file_name)
    save_xml = os.path.join(woff_dir, xml_name)
    
    resp = requests.get(url="xxx")
    with open(save_woff, "wb") as f:
        f.write(resp.content)
        f.close()
    font = TTFont(save_woff)
    font.saveXML(save_xml)  # 转换为xml文件
    

    然后打开xml文件看,先来查看一下缩略的内容,红色圈圈的那两个是本次重点破解的分析的内容:
    主要涉及内容破解版块

    然后先查看cmap,发现线索,里面注释的地方有标注了。然后我们大胆猜测:NINE对应的name=cid00018,code=0x39,这翻译过来就是9对应的name=cid00018,其id标记为0x39:
    在这里插入图片描述

    接着来看一下code=0x39,其对应的name=cid00018,然后我们拿这个cid00018去搜索,发现在部分里面看到:
    <GlyphID id="3" name="cid00018"/>,这表明什么呢?结合前后两个映射关系,然后连起来再大胆猜测一下,可能是9对应3?
    在这里插入图片描述
    为了验证这个猜想,继续再找一下其他例子,我使用已经转换为如下格式,方便你们对比,你们也可以从三张截图来对比,哪三张截图呢?分别是:①是前面包含“code=0x39,name=cid00018”的截图;②是包含“id=3,name=cid00018”的截图;③是文章的第二张截图。
    你们可以①②截图来一个个列出映射关系,建议先列出①的映射关系,再列出②的映射关系,然后再将①、②的映射关系组合起来,得出一个新的映射关系,这个新的映射关系就是我们所需的,下面来给你们看一下我提取的①、②的映射关系:

    ①的映射关系,在这里我定义为before_code_id
    ②的映射关系,在这里我定义为affter_code_id,结果如下:
    before_code_id =  {
        "0": "cid00019",
        "1": "cid00020",
        "2": "cid00017",
        "3": "cid00021",
        "4": "cid00022",
        "5": "cid00024",
        "6": "cid00026",
        "7": "cid00025",
        "8": "cid00023",
        "9": "cid00018"
    }
    affter_code_id = {
        "cid00017": 2,
        "cid00018": 3,
        "cid00019": 4,
        "cid00020": 5,
        "cid00021": 6,
        "cid00022": 7,
        "cid00023": 8,
        "cid00024": 9,
        "cid00025": 10,
        "cid00026": 11
    }
    
    然后从html源码到before_code_id, affter_code_id应用起来就是如下:
    前端数字—中间人code—最终的数字,即:
    "0"——"cid00019"——4
    "1"——"cid00020"——5
    "2"——"cid00017"——2
    "3"——"cid00021"——6
    "4"——"cid00022"——7
    "5"——"cid00024"——9
    "6"——"cid00026"——11
    "7"——"cid00025"——10
    "8"——"cid00023"——8
    "9"——"cid00018——3
    
    我们再简化一步,直接从html源码数字到最终的数字映射为如下(即直接省去中间的cidxxxxx这串):
    "0"——4
    "1"——5
    "2"——2
    "3"——6
    "4"——7
    "5"——9
    "6"——11
    "7"——10
    "8"——8
    "9"——3
    
    
    但是你们发现这映射后的数字很奇怪吗,比如"6"、"7"映射之后分别为11和10,
    但是在我们的正常逻辑之中不对呀,要不我们再列一下html源码跟前端的肉眼看到的数字的映射关系呗:
    "0"——2
    "1"——3
    "2"——0
    "3"——4
    "4"——5
    "5"——7
    "6"——9
    "7"——8
    "8"——6
    "9"——1
    哇,这列出来之后不是很相似吗,跟前面的结果,要不我再放在一起给你们好对比一下呗:
    xml提取的映射     html源码跟网页展示的,提取的映射
    "0"——4				"0"——2
    "1"——5				"1"——3
    "2"——2				"2"——0
    "3"——6				"3"——4
    "4"——7				"4"——5
    "5"——9				"5"——7
    "6"——11				"6"——9
    "7"——10				"7"——8
    "8"——8				"8"——6
    "9"——3				"9"——1
    

    到此,我们发现从xml提取的映射跟html源码跟网页展示的提取的映射数值都是相差2,所以我们大胆猜测:网页上看到的数值是可以从xml提取的映射关系里面每个数字减去2所得的,即:

    "0"——4-2=2
    "1"——5--2=3
    "2"——2-2=0
    "3"——6-2=4
    "4"——7-2=5
    "5"——9-2=7
    "6"——11-2=9
    "7"——10-2=8
    "8"——8-2=6
    "9"——3-2=1
    

    所以这就是破解了嘛,到此,这个教程总可以理解吧,写得辣么辛苦、改的辣么辛苦,赶快评论点赞收藏一套走起来

    好了,别嗨了,实操才是王道,下面来看一下核心代码,如下:

    #!/usr/bin/python3
    # -*- coding: utf-8 -*-
    # @Time    : 2019/8/19 13:08
    # @Author  : qizai
    # @File    : crawl_woff.py
    # @Software: PyCharm
    
    # 先安装:pip3 install fontTools
    import os
    import requests
    from fake_useragent import UserAgent
    from fontTools.ttLib import TTFont  # 对字体文件进行格式转换
    
    base_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    ua = UserAgent()
    header = {
        "user-agent": ua.chrome,
    }
    
    
    def parse_woff(url=""):
        """这里是下载字体并且解析对应的值"""
        global cookie
        global header
        
        woff_dir = os.path.join(base_dir, "statics/woffs/")
        file_name = url.split("/")[-1]
        xml_name = file_name.replace(file_name.split(".")[-1], "xml")
        save_woff = os.path.join(woff_dir, file_name)
        save_xml = os.path.join(woff_dir, xml_name)
    
        if os.path.exists(save_woff):  # 存在本地的话直接提取本地的文件去解析即可省去下载,避免浪费资源
            font = TTFont(save_woff)
        else:
            resp = requests.get(url=url, cookies=cookie, headers=header)
            with open(save_woff, "wb") as f:
                f.write(resp.content)
                f.close()
            font = TTFont(save_woff)
            font.saveXML(save_xml)  # 转换为xml文件
    
        cmap = font.getBestCmap()  # 这个是xml源码里面的【数值-中间人code】映射,数值还不一定是html源码里面的数值,而是每位数经过加上一定的数值之后的
        tmp = {  # 这个是对应的才是我们需要的值,或者你也可以在每次获取的时候,将这个值对应减去48即可,就可以省去这这个映射
            48: 0,  # html源码里面的0对应xml源码里面的48
            49: 1,  # html源码里面的1对应xml源码里面的49
            50: 2,  # html源码里面的2对应xml源码里面的50
            51: 3,  # html源码里面的3对应xml源码里面的51
            52: 4,  # html源码里面的4对应xml源码里面的52
            53: 5,  # html源码里面的5对应xml源码里面的53
            54: 6,  # html源码里面的6对应xml源码里面的54
            55: 7,  # html源码里面的7对应xml源码里面的55
            56: 8,  # html源码里面的8对应xml源码里面的56
            57: 9,  # html源码里面的9对应xml源码里面的57
        }    # 注意:个人猜测以上这个tmp字典,xml源码的数字跟html源码数字的映射关系可能会定期改变的
    
        before_code_id = {}  # 转换之后before_code_id为:1:cid00019  key就是html源码数字,value就是用来查询的中间人code
        for k, v in cmap.items():
            if k not in set(range(48, 58)):
                continue
            before_code_id[tmp.get(k)] = v  # 这一步其实是将49:cid00019的映射格式转换为好理解的1:cid00019映射关系
    
        code_id_list = font.getGlyphOrder()[2:]  # 这个返回的值有11个,但是我这里只是取了第三个到最后一个,是用来取计算前端看到的真正的数值
        affter_code_id = {k:v for k,v in zip(code_id_list, range(2, 12))}  # 将每一个按照顺序映射为cid00562:2这种
    
        return before_code_id, affter_code_id
    
    
    if __name__ == '__main__':
        """使用如下"""
        before_code_id, affter_code_id = parse_woff(url="xxxx")
        
        # html源码数字:假设为0
        html_number = 0
        tmp_code = before_code_id.get(html_number)  # 先匹配中间人code
        real_number = affter_code_id.get(tmp_code) - 2  # 再提取中间人code对应的真正的数字,记得要减去2,因为本来是每位数字已经多了2
        print("当前html源码数字html_number:{} 真正的数字为real_number:{}".format(html_number, real_number))
    

    当前的woff字体反爬已经破解了,如果有不妥的地方请指出,大家一起学习。

    至此本文教程写完了,希望能够帮助到各位在爬虫路上的小伙伴们,觉得不错点个赞呗
    感谢认真读完这篇教程的您

    先别走呗,这里有可能有你需要的文章:

    CSS字体反爬实战,10分钟就能学会
    爬虫:js逆向目前遇到的知识点集合;
    woff字体反爬实战,10分钟就能学会;
    爬虫js解密分析:某某猫小说;
    爬虫js解密分析:某某云文学;
    个人总结-js逆向解析思路;

    展开全文
  • 在做移动开发的时候,UI设计师会提供一些定制字体,来提高产品的视觉效果。对于前端开发来说,就需要考虑字体文件的兼容性和文件的大小,在尽量保证UI效果的情况下,兼容更多的浏览器,减少资源体积,使UI效果、兼容...

    在做移动开发的时候,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浏览器兼容性
    woff字体文件浏览器兼容性(2019.07.23)

    .woff2

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

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

     

    结论

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

     

     

    参考资料:

       网页字体优化

       WOFF 2.0 评估报告

       浏览器兼容性查询

       Web开放字体格式Wiki

       2018年的@font-face

    展开全文
  • 由iconfont引起的svg、ttf、woffwoff2图标的研究及其转换 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


    参考资料:

    展开全文
  • 找到源代码里面的 .woff 字体文件,下载下来,下面的代码转换为原来的映射 字体文件是二进制的 from fontTools.ttLib import TTFont def get_cmap(self,font_nums): """ 分析字体所映射的值 :param font_nums...
  • 如题!   woff百度百科:...woff是字体文件,做网页时放到服务端,如果客户端浏览器中可以加载这个。   那么,wo
  • woff 404 woff2 404

    2018-05-15 11:35:03
    问题:google fonts 国内不能使用,360加速也停止服务了,只能本地化,但是没效果,查看才知道 woff 格式 404。字体文件明明存在的,显示404.原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上...
  • 支持.woff和.woff2,功能比较齐全,唯一不好的是广告稍多。 字客网字体文件转换类型截图 Convertio 是美国的一家文件在线转换网站,除了字体外也做图片、音视频等文件不同格式间的转换...
  • 问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woffwoff2字体的错误。导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间。原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,...
  • ,+等符号,字体也不对,发现浏览器总是报找不到woffwoff2字体的错误。​ 原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。​ IIS7 解决办法: ...
  • WOFF字体反爬之58同城

    2019-12-25 10:29:12
    首先,打开页面,了解到这部分信息是有字体加密的。如下图: 这部分信息包含 性别 ...经过观察发现 这里引用了woff的一个字体文件, 我们把其中的base64编码部分提取出来,保存为一个.woff的文件。 python代码示...
  • 在IIS上部署网站,网页引用woff字体时,浏览器报“找不到woff字体”、“404”错误,不仅预设的字体加载不出来,还影响网页加载速度。 二、原因 IIS默认设置情况下不识别.woff、.woff2、.svg这几个后缀的文件。 三、...
  • ,+等符号,字体也不对,发现浏览器总是报找不到woffwoff2字体的错误。​ 原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。 登录网址下载对应的文件放在自己的项目中 ...
  • 做过猫眼的都知道猫眼用了自己定制的woff字体文件来渲染字体。所以看源码是乱码。而且最近我做的时候发现猫眼每次下载的字体文件里的字体都不一样了。。每个字都有变形。必须用OCR技术才能解决。 尽管可以用selenium...
  • WOFF2与icon字体化

    2017-04-25 10:27:27
    如今,各浏览器对WOFF的支持都已经比较完善了。如果长期关注字体文件,就会发现现在又多了一个WOFF2的格式。没错,就如其字面意思,就是WOFF2.0。 先简单回顾一下主要的web字体文件的格式: .eot ,...
  • 最近将谷歌字体Open Sans字体下载下来放到自己服务器后,web服务器已经配置好woffwoff2字体文件的mime类型font/woff2,可以访问woff2字体文件弹出下载框,但是加载css文件,**本地file测试**就是无法使用Open Sans...
  • 这是在请求起点中文网的小说字数时遇到的问题.pip install fontTools 是用于将woff这种字体文件转化成XML文件在python的命令窗口运行这句话.================================================================首先...
  • Web开放字体格式(Web Open Font Format,简称WOFF)[1] 是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩...
  • 主要有几个大分类:TrueType、Embedded Open Type 、OpenType、WOFF 和SVG。TrueType(.ttf) Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体,这使得它们比...
1 2 3 4 5 ... 20
收藏数 14,562
精华内容 5,824
关键字:

woff