JS Analysis Cat _ eye _ electronic _ Shadow font file @font-face

0. Reference

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

This is a CSS @ rule called @font-face, which allows Web developers to specify online fonts for their web pages. By this author's own font, @font-face can eliminate the reliance on the user's computer fonts.

Autohome font anti-crawl hack practice https://zhuanlan.zhihu.com/p/32087297

Cat's eye hack digital reverse crawl get real-time box office https://zhuanlan.zhihu.com/p/33112359

1. Page performance

1.1 Ctrl+u View Web page source code

1.2 Global Search class name ' Stonefont ' found using @font-face

1.3 Network Panel Request font file appears

2. Problem analysis2.1 Downloading font files, converting formats

Https://github.com/hanikesn/woff2otf

(PY3) g:\>python woff2otf.py df47db90e8a053f175dabc707d55bd122084. Woff df47db90e8a053f175dabc707d55bd122084. OTF

2.2 Using Fontcreator software to open font files

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

Above number of visible character 8 uniEF04 corresponds to Web page source & #xef04

New tags open the same page, hard to refresh the visible font file name changes, save the font file for Font2.woff, using the software to open the visible character 8 above the number changes, that is, each time the page needs to download the corresponding font file.

2.3 Converting formats using the Fonttools library

Pip Install Fonttools

 from Import  = Ttfont ('font1.woff') font1.savexml ('font1.xml '  = Ttfont ('font2.woff') font2.savexml ('  Font2.xml')

2.4 Interpreting the XML file 2.4.1 Name list

The ID corresponding to the name has no actual meaning

2.4.2 Search ' EF04 ' to see the glyph definition of a specific character

2.4.32 font files match the glyph definition of character 8

Font1.woff character 8 >>> name1 >>> Glyph definition = = Glyph definition <<< name2 <<< character 8 Font2.woff

2.5 Fonttools Read Name list

in [+]: font1['Glyf'].keys () out[+]: Dict_keys (['glyph00000','x','uniF380','uniF177','uniEE01','unif15d','uniF292','uniF097','unie2b1','unie4d0','uniEF04','Unif6ac']) in [+]: font2['Glyf'].keys () out[+]: Dict_keys (['glyph00000','x','uniF722','uniF853','unif72a','uniEEE1','uniE473','unie77c','uniF628','uniEFC1','unie5c0','unie5a9'])

2.6 Fonttools Comparison of different font filesGlyph Definition

In []: Font1_8 = font1['Glyf']['uniEF04']in [[in]: Font2_8 = font2['Glyf']['unif72a']in [40]: Font1_8? Type:glyphstring form:<fonttools.ttlib.tables._g_l_y_f.glyph Object at 0x000000000787ce80>File:e:\programdata\anaconda3\envs\py3\lib\site-packages\fonttools\ttlib\tables\_g_l_y_f.pydocstring:<no docstring>In [+]: font1_8 = = font2_8out[41 ]: True in [[]: Font1_4 = font1['Glyf']['uniF380']in [[]: font2_7 = font2['Glyf']['uniF722'] in[ []: Font1_4 = = font2_7out[49]: False

3. Code implementation that maps a new font file to a base font file

In [2]: fromFonttools.ttlibImportttfont ...: font1= Ttfont ('Font1.woff')   ...:   ...: Print(font1['Glyf'].keys ()) ...: Keys= font1['Glyf'].keys () ...: Values= List ('. 4209716385')   ...: #build Benchmark {name:num}...: Dict1 = Dict ((k,v) forKvinchzip (keys, values) ...:Print(Dict1) ...: ...: font2= Ttfont ('Font2.woff') ...: Dict2= {}   ...:  forKeyinchfont2['Glyf'].keys (): ...: forKvinchdict1.items (): ...:#populate the new name and num mappings by comparing glyph definitions...:iffont1['Glyf'][k] = = font2['Glyf'][key]: ...: dict2[key]=V.strip () ...: Break   ...: Print(dict2) ...::d Ict_keys (['glyph00000','x','uniF380','uniF177','uniEE01','unif15d','uniF292','uniF097','unie2b1','unie4d0','uniEF04','Unif6ac']){'glyph00000':' ','x':'.','uniF380':'4','uniF177':'2','uniEE01':'0','unif15d':'9','uniF292':'7','uniF097':'1','unie2b1':'6','unie4d0':'3','uniEF04':'8','Unif6ac':'5'}{' glyph00000 ': ', ' x ': '. ', ' uniF722 ': ' 7 ', ' uniF853 ': ' 9 ', ' unif72a ': ' 8 ', ' uniEEE1 ': ' 5 ', ' uniE473 ': ' 3 ', ' unie77c ': ' 0 ', ' uniF628 ': ' 6 ', ' uniEFC1 ': ' 2 ', ' unie5c0 ': ' 1 ', ' unie5a9 ': ' 4 '}

3.1 Verify the correctness of the output dict2

JS Analysis Cat _ eye _ electronic _ Shadow font file @font-face