이 글에서는 CSS3의 새로운 기능인 웹폰트 사용법을 소개하고, 데이터 수집 방지를 위해 맞춤 웹폰트를 사용합니다
웹폰트 소개
web-font는 CSS3@font-face의 태그입니다. @font-face 선언에서 글꼴을 선언하고 이를 지정할 수 있습니다. 글꼴 라이브러리 파일은 인터넷의 특정 주소에서 다운로드됩니다.
구체적인 작성 방법은 다음과 같습니다.
@font-face { font-family: '字体名称'; src: url('http://www.example.com/字体名称.eot'); /* IE9 Compat Modes */ src: url('http://www.example.com/字体名称.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('http://www.example.com/字体名称.ttf') format('truetype'), /* Safari, Android, iOS */ url('http://www.example.com/字体名称.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ url('http://www.example.com/字体名称.svg?#字体名称') format('svg'); /* Legacy iOS */}
웹 페이지 데이터를 특수 글꼴로 수정해야 하는 경우 웹 글꼴을 사용할 수 있습니다. 웹 글꼴을 사용하면 네트워크에서 글꼴이 자동으로 로드되므로 사용자는 컴퓨터에 글꼴을 설치할 필요가 없습니다.
방지 원칙:
웹 글꼴을 사용하면 네트워크에서 글꼴을 로드할 수 있으므로 글꼴 세트를 직접 만들고 사용자 정의 문자 매핑 테이블을 설정할 수 있습니다.
예를 들어 0xaaa를 설정하면 문자 1이 매핑되고, 0xbbb는 문자 2가 매핑되는 식입니다.
문자 1을 표시해야 할 경우 웹페이지의 소스코드는 0xaaa만 되고, 수집되는 데이터도 1이 아닌 0xaaa만 되어 수집가가 정확한 데이터를 수집할 수 없습니다. 일반 액세스 권한이 있는 사용자에게는 영향이 없습니다.
중국어 수집 방지를 위해 웹폰트 방식을 사용하는 것은 중국어 글꼴 라이브러리가 너무 크기 때문에 적합하지 않습니다. 숫자, 영문의 경우 수집방지에 적합한 방법입니다.
먼저 시연의 편의를 위해 시스템과 함께 제공되는 Arial 글꼴을 선택합니다.
ttf에서 svg로
Everythingfonts.com/ttf-to-svg를 입력하세요.
ttf 파일을 업로드하고 글꼴 파일 svg 형식으로 변환하고 my_webfont.svg
로 저장
사용하려는 문자 선택 및 글꼴 매핑 관계 설정
icomoon.io/app/#/select 입력
왼쪽 상단의 아이콘 가져오기 버튼을 선택하고 my_webfont.svg를 가져옵니다.
가져온 후 사용할 문자를 선택합니다. 이 예에서는 만 선택하면 됩니다. 0-9을 입력한 후 오른쪽 하단 글꼴 생성 버튼
문자 매핑 설정
Arial 글꼴 문자 매핑 관계(문자 및 16진수)를 클릭합니다. )
0 => 301 => 312 => 323 => 334 => 345 => 356 => 367 => 378 => 389 => 39
여기서 수정합니다. 매핑 관계는 추측하기 어려울 정도로 복잡하고 불규칙할 수 있습니다.
예를 들어 매핑 관계를
0 => e1f21 => efab2 => eba33 => ecfa4 => edfd5 => effa6 => ef3a7 => e6f58 => ecb29 => e8ae
로 설정하고 매핑 관계에 맞게 이름을 수정합니다. 오른쪽 하단 다운로드글꼴을 다운로드하세요.
다운로드한 모든 글꼴 파일의 이름을 my_webfont.*
먼저 @font-face
@font-face { font-family: 'my_webfont'; src: url('fonts/my_webfont.eot?fdipzone'); src: url('fonts/my_webfont.eot?fdipzone#iefix') format('embedded-opentype'), url('fonts/my_webfont.ttf?fdipzone') format('truetype'), url('fonts/my_webfont.woff?fdipzone') format('woff'), url('fonts/my_webfont.svg?fdipzone#my_webfont') format('svg');}
를 설정한 다음 CSS 클래스를 정의해야 하며, Font-family는 이 웹 글꼴을 사용합니다
.my_webfont{ font-family: my_webfont !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
이런 데이터를 표시해야 하는 곳에 데이터를 채워넣고, 컨테이너의 클래스는 문자 1이 표시될 수 있도록 my_webfont
<p class="my_webfont"></p>
로 정의합니다.
<?php// 字体映射关系function get_font_num($num){ $result = ''; $font_map = array( 0 => 'e1f2', 1 => 'efab', 2 => 'eba3', 3 => 'ecfa', 4 => 'edfd', 5 => 'effa', 6 => 'ef3a', 7 => 'e6f5', 8 => 'ecb2', 9 => 'e8ae' ); for($i=0,$len=strlen($num); $i<$len; $i++){ $n = substr($num, $i, 1); if(is_numeric($n)){ $result .= '&#x'.$font_map[$n].';'; }else{ $result .= $n; } } return $result; }$data = array( array('金刚:骷髅岛', 4921.98, 5), array('美女与野兽', 971.36, 12), array('欢乐喜剧人', 590.27, 5), array('一条狗的使命', 389.76, 26), array('领袖1935', 271.27, 1), );?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>利用自定义web-font实现数据防采集</title> <style type="text/css"> @font-face { font-family: 'my_webfont'; src: url('fonts/my_webfont.eot?fdipzone'); src: url('fonts/my_webfont.eot?fdipzone#iefix') format('embedded-opentype'), url('fonts/my_webfont.ttf?fdipzone') format('truetype'), url('fonts/my_webfont.woff?fdipzone') format('woff'), url('fonts/my_webfont.svg?fdipzone#my_webfont') format('svg'); font-weight: normal; font-style: normal; } .my_webfont{ font-family: my_webfont !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } td{ padding: 0px 5px 0px 5px; text-align: center; } .left{ text-align: left; } </style> </head> <body> <table> <tr> <td>排名</td> <td>片名</td> <td>实时票房(万)</td> <td>上映天数</td> </tr><?php for($i=0,$len=count($data); $i<$len; $i++){ echo '<tr>'.PHP_EOL; echo '<td>'.($i+1).'</td>'.PHP_EOL; echo '<td class="left">'.$data[$i][0].'</td>'.PHP_EOL; echo '<td class="my_webfont">'.get_font_num($data[$i][1]).'</td>'.PHP_EOL; echo '<td class="my_webfont">'.get_font_num($data[$i][2]).'天</td>'.PHP_EOL; echo '</tr>'.PHP_EOL; }?> </table> </body></html>
브라우저에서 접속하면 정상적인 데이터를 볼 수 있습니다
그러나 HTML 소스 코드는 실제로
<tr><td>1</td><td class="left">金刚:骷髅岛</td><td class="my_webfont">.</td><td class="my_webfont">天</td></tr>
수집가는 edfd;의 데이터는 edfd;에 매핑된 문자가 무엇인지 알 수 없으므로 데이터 수집이 불가능합니다.
물론 수집자는 분석을 통해 각 매핑의 의미를 알 수 있으므로 수집 후 변환 처리를 수행할 수 있습니다.다양한 글꼴 파일과 매핑 테이블을 만들 수 있습니다. 방문할 때마다 한 가지 유형이 무작위로 사용되며, 글꼴 파일과 매핑 테이블의 일괄 업데이트가 정기적으로 업데이트되어 수집 난이도가 높아집니다.
이렇게 하면 수집가가 데이터를 수집하기 전에 모든 글꼴 파일과 매핑 테이블을 분석하고 변환해야 하므로 수집 비용이 크게 증가하게 됩니다.
위 내용은 사용자 정의 웹 글꼴을 사용하여 데이터 수집 방지 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!