效果
- 页面看到的和源代码不一致。
- 比如 1 => 0xaaa，2 => 0xbbb。
技术
- 利用自定义 web-font 实现的。
原理
- 使用 web-font ，我们自己创建一套字体，设置自定义的字符映射关系表。
- 该方案适用于数字与英文，中文防采集不适合使用这种方法，因为中文的字体库太大了。
实现方法
- 选择系统自带的 Arial.ttf 字体，以这个字体为例。
- https://everythingfonts.com/ttf-to-svg 上传ttf文件，转换成svg格式，另存为my_webfont.svg。
- https://icomoon.io/app/#select 选择 Import Icons 按钮，导入my_webfont.svg后选择我们要使用的字符，比如0-9，然后点击 Generate Font 按钮。
- 我们这里修改映射关系，尽量复杂一点且没有规律。
0 => e1f2
1 => efab
2 => eba3
3 => ecfa
4 => edfd
5 => effa
6 => ef3a
7 => e6f5
8 => ecb2
9 => e8ae
- 设置映射关系后，点击download下载字体。
- 字体文件全部命名为 my_webfont.*。
代码
<?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>
Thanks ~
