js分析 猫_眼_电_影 字体文件 @font-face

0. 参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。

反爬虫解析-字体替换(天眼查/猫眼电影)  https://www.jianshu.com/p/79c4272c0969

woff 转 xml

猫眼破解数字反爬获取实时票房 https://zhuanlan.zhihu.com/p/33112359

专用工具 Font Creator 查看字体文件

1. 页面表现

1.1 Ctrl+u 查看网页源代码

1.2 全局搜索 class name 'stonefont' 发现使用了 @font-face

1.3 Network 面板出现请求字体文件

2. 问题分析

2.1 下载字体文件，转换格式

https://github.com/hanikesn/woff2otf

(py3) G:\>python woff2otf.py df47db90e8a053f175dabc707d55bd122084.woff df47db90e8a053f175dabc707d55bd122084.otf

2.2 使用FontCreator软件打开字体文件

http://www.high-logic.com/font-editor/fontcreator.html

下图可见字符8的上方编号uniEF04与网页源代码 &#xef04 存在对应关系

新标签打开相同的页面，硬性刷新可见字体文件名称发生变化，另存字体文件为 font2.woff, 使用软件打开可见字符8的上方编号发生变化，即每次解析网页需要同时下载相应的字体文件。

2.3 使用 fontTools 库转换格式

pip install fontTools

from fontTools.ttLib import TTFont
font1 = TTFont('font1.woff')
font1.saveXML('font1.xml')

font2 = TTFont('font2.woff')
font2.saveXML('font2.xml')

2.4 解读 xml 文件

2.4.1 name 列表

name 对应的 id 没有实际意义

2.4.2 搜索 ‘EF04’ 可见 <glyf> 具体某个字符的 字形定义

2.4.3 两个字体文件对 字符8 的 字形定义 保持一致

font1.woff 字符8 >>> name1 >>> 字形定义1 == 字形定义2 <<< name2 <<< 字符8 font2.woff

2.5 fontTools 读取 <glyf> name 列表

In [26]: font1['glyf'].keys()
Out[26]: dict_keys(['glyph00000', 'x', 'uniF380', 'uniF177', 'uniEE01', 'uniF15D', 'uniF292', 'uniF097', 'uniE2B1', 'uniE4D0', 'uniEF04', 'uniF6AC'])

In [27]: font2['glyf'].keys()
Out[27]: dict_keys(['glyph00000', 'x', 'uniF722', 'uniF853', 'uniF72A', 'uniEEE1', 'uniE473', 'uniE77C', 'uniF628', 'uniEFC1', 'uniE5C0', 'uniE5A9'])

2.6 fontTools 比较不同字体文件的 字形定义

In [3]: from fontTools.ttLib import TTFont

In [4]: font1 = TTFont('font1.woff')

In [5]: font2 = TTFont('font2.woff')

In [6]: font1_8 = font1['glyf']['uniEF04']
   ...: font2_8 = font2['glyf']['uniF72A']
   ...: font1_4 = font1['glyf']['uniF380']
   ...: font2_7 = font2['glyf']['uniF722']
   ...:

In [7]: font1_8?
Type:        Glyph
String form: <fontTools.ttLib.tables._g_l_y_f.Glyph object at 0x000000000573A978>
File:        e:\programdata\anaconda3\envs\py3\lib\site-packages\fonttools\ttlib\tables\_g_l_y_f.py
Docstring:   <no docstring>

In [8]: font1_8.coordinates
Out[8]: GlyphCoordinates([(177, 388),(69, 428),(69, 534),(69, 614),(181, 719),(369, 719),(483, 608),(483, 532),(483, 428),(377, 388),(443, 366),(512, 271),(512, 205),(512, 112),(382, -12),(170, -12),(105, 50),(41, 110),(41, 207),(41, 277),(111, 371),(159, 537),(159, 485),(225, 422),(277, 422),(325,
422),(360, 454),(393, 485),(393, 579),(326, 646),(224, 646),(159, 582),(131, 207),(131, 168),(165, 99),(202, 79),(236, 60),(277, 60),(309, 60),(360, 81),(381, 101),(422, 140),(422, 268),(338, 350),(212, 350),(131, 269)])

In [9]: font2_8.coordinates
Out[9]: GlyphCoordinates([(177, 388),(69, 428),(69, 534),(69, 614),(181, 719),(369, 719),(483, 608),(483, 532),(483, 428),(377, 388),(443, 366),(512, 271),(512, 205),(512, 112),(382, -12),(170, -12),(105, 50),(41, 110),(41, 207),(41, 277),(111, 371),(159, 537),(159, 485),(225, 422),(277, 422),(325,
422),(360, 454),(393, 485),(393, 579),(326, 646),(224, 646),(159, 582),(131, 207),(131, 168),(165, 99),(202, 79),(236, 60),(277, 60),(309, 60),(360, 81),(381, 101),(422, 140),(422, 268),(338, 350),(212, 350),(131, 269)])

In [11]: font1_8.coordinates == font2_8.coordinates
Out[11]: True

In [12]: font1_8 == font2_8
Out[12]: True

In [13]: font1_4.coordinates
Out[13]: GlyphCoordinates([(323, 0),(323, 171),(13, 171),(13, 252),(339, 716),(411, 716),(411, 252),(508, 252),(508, 171),(411, 171),(411, 0),(323, 252),(323, 575),(99, 252)])

In [14]: font2_7.coordinates
Out[14]: GlyphCoordinates([(47, 622),(47, 707),(511, 707),(511, 638),(476, 602),(409, 505),(341, 384),(290, 261),(271, 197),(246, 107),(238, 0),(147, 0),(148, 42),(165, 144),(181, 204),(212, 324),(271, 435),(301, 492),(365, 584),(398, 622)])

In [15]: font1_4.coordinates != font2_7.coordinates
Out[15]: True

In [16]: font1_4 != font2_7
Out[16]: True

In [17]: font1_4.coordinates != font1_8.coordinates
Out[17]: True

In [18]: font1_4 != font1_8
Out[18]: True

3. 根据基准字体文件为新字体文件建立映射关系的代码实现

运行时访问不了 .coordinates 和 .compileCoordinates() 属性？？？

'Glyph' object has no attribute 'coordinates'

from fontTools.ttLib import TTFont
font1 = TTFont('font1.woff')

print(font1['glyf'].keys())
keys = font1['glyf'].keys()
values = list(' .4209716385')
# 构建基准 {name: num}
dict1 = dict((k,v) for k,v in zip(keys, values))
print(dict1)

font2 = TTFont('font2.woff')
dict2 = {}
for key in font2['glyf'].keys():
    for k, v in dict1.items():
        # 通过比较 字形定义 填充新的name和num映射关系
        if font1['glyf'][k] == font2['glyf'][key]:
            dict2[key] = v.strip()
            break
print(dict2)

3.1 运行结果

3.2 通过下图确认输出 dict2 的正确性