利用自定义web-font实现数据防采集代码-tutorial php-php.cn

利用自定义web-font实现数据防采集代码

PHPz

Lepaskan： 2023-03-07 09:26:01

asal

2641 orang telah melayarinya

本文介绍CSS3新特性web-font的使用，并利用自定义web-font实现数据防采集

web-font介绍

web-font是CSS3中的一种标记 @font-face，在@font-face声明里，你可以声明一种字体，指定这种字体字体库文件从网络某个地址下载。

具体写法如下：

@font-face {    font-family: &#39;字体名称&#39;;    src:  url(&#39;http://www.example.com/字体名称.eot&#39;); /* IE9 Compat Modes */
    src:  url(&#39;http://www.example.com/字体名称.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), /* IE6-IE8 */
    url(&#39;http://www.example.com/字体名称.ttf&#39;) format(&#39;truetype&#39;), /* Safari, Android, iOS */
    url(&#39;http://www.example.com/字体名称.woff&#39;) format(&#39;woff&#39;),  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    url(&#39;http://www.example.com/字体名称.svg?#字体名称&#39;) format(&#39;svg&#39;); /* Legacy iOS */}

Salin selepas log masuk

当网页数据需要使用特别的字体来修饰时，我们就可以使用web-font。因为使用web-font会自动从网络中加载字体，并不需要用户本机有安装这个字体。

使用自定义web-font实现数据防采集

防采集原理：
使用web-font可以从网络加载字体，因此我们可以自己创建一套字体，设置自定义的字符映射关系表。
例如设置0xaaa是映射字符1，0xbbb是映射字符2，以此类推。
当需要显示字符1时，网页的源码只会是0xaaa，被采集的也只会是0xaaa，并不是1，使采集者采集不到正确的数据。而对于正常访问的用户则没有影响。

对于中文的防采集不适合使用web-font这种方法，因为中文的字体库太大。而对于数字，英文则适合使用此方法实现防采集。

实例：使用自定义web-font实现数字数据防采集（例如股票，电影票房等数据）

1.创建指定字符的自定义字体

首先选择一款字体，为方便演示，选择系统自带的Arial字体。

ttf转svg

这里写图片描述

进入everythingfonts.com/ttf-to-svg
上传ttf文件，将字体文件转为svg格式，另存为my_webfont.svg

选择需要使用的字符及设置字体映射关系

这里写图片描述

进入 icomoon.io/app/#/select
选择左上角 Import Icons 按钮，导入my_webfont.svg
导入后选择我们要使用的字符，本例只需要选择0-9，然后点击右下角 Generate Font 按钮

设置字符映射
Arial字体字符映射关系(字符与16进制)

0 => 301 => 312 => 323 => 334 => 345 => 356 => 367 => 378 => 389 => 39

Salin selepas log masuk

我们这里修改映射关系，可以尽量复杂一点且没有规律，使不容易猜出。

例如把映射关系设置为

0 => e1f21 => efab2 => eba33 => ecfa4 => edfd5 => effa6 => ef3a7 => e6f58 => ecb29 => e8ae

Salin selepas log masuk

这里写图片描述

并把名字也按映射关系修改，设置映射关系后，点击右下角download下载字体。

把下载的字体文件全部命名为my_webfont.*

2.在网页中使用web-font显示数据

首先需要设置 @font-face

@font-face {    font-family: &#39;my_webfont&#39;;    src:  url(&#39;fonts/my_webfont.eot?fdipzone&#39;);    src:  url(&#39;fonts/my_webfont.eot?fdipzone#iefix&#39;) format(&#39;embedded-opentype&#39;),    url(&#39;fonts/my_webfont.ttf?fdipzone&#39;) format(&#39;truetype&#39;),    url(&#39;fonts/my_webfont.woff?fdipzone&#39;) format(&#39;woff&#39;),    url(&#39;fonts/my_webfont.svg?fdipzone#my_webfont&#39;) format(&#39;svg&#39;);}

Salin selepas log masuk

然后需要定义一个css的class，font-family使用这个web-font

.my_webfont{    font-family: my_webfont !important;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}

Salin selepas log masuk

在需要显示这种数据的地方，填入数据，且容器的class定义为my_webfont

<p class="my_webfont">&#xefab</p>

Salin selepas log masuk

这样就可以显示字符1了。

3.完整的实例代码

<?php// 字体映射关系function get_font_num($num){
    $result = &#39;&#39;;    $font_map = array(        0 => &#39;e1f2&#39;,        1 => &#39;efab&#39;,        2 => &#39;eba3&#39;,        3 => &#39;ecfa&#39;,        4 => &#39;edfd&#39;,        5 => &#39;effa&#39;,        6 => &#39;ef3a&#39;,        7 => &#39;e6f5&#39;,        8 => &#39;ecb2&#39;,        9 => &#39;e8ae&#39;
    );    for($i=0,$len=strlen($num); $i<$len; $i++){        $n = substr($num, $i, 1);        if(is_numeric($n)){            $result .= &#39;&#x&#39;.$font_map[$n].&#39;;&#39;;
        }else{            $result .= $n;
        }
    }    return $result;
}$data = array(    array(&#39;金刚：骷髅岛&#39;, 4921.98, 5),    array(&#39;美女与野兽&#39;, 971.36, 12),    array(&#39;欢乐喜剧人&#39;, 590.27, 5),    array(&#39;一条狗的使命&#39;, 389.76, 26),    array(&#39;领袖1935&#39;, 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: &#39;my_webfont&#39;;        src:  url(&#39;fonts/my_webfont.eot?fdipzone&#39;);        src:  url(&#39;fonts/my_webfont.eot?fdipzone#iefix&#39;) format(&#39;embedded-opentype&#39;),        url(&#39;fonts/my_webfont.ttf?fdipzone&#39;) format(&#39;truetype&#39;),        url(&#39;fonts/my_webfont.woff?fdipzone&#39;) format(&#39;woff&#39;),        url(&#39;fonts/my_webfont.svg?fdipzone#my_webfont&#39;) format(&#39;svg&#39;);        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 &#39;<tr>&#39;.PHP_EOL;        echo &#39;<td>&#39;.($i+1).&#39;</td>&#39;.PHP_EOL;        echo &#39;<td class="left">&#39;.$data[$i][0].&#39;</td>&#39;.PHP_EOL;        echo &#39;<td class="my_webfont">&#39;.get_font_num($data[$i][1]).&#39;</td>&#39;.PHP_EOL;        echo &#39;<td class="my_webfont">&#39;.get_font_num($data[$i][2]).&#39;天</td>&#39;.PHP_EOL;        echo &#39;</tr>&#39;.PHP_EOL;
    }?>
  </table>
 </body></html>

Salin selepas log masuk

在浏览器访问可以看到正常的数据

这里写图片描述

但html源码实际上是

<tr><td>1</td><td class="left">金刚：骷髅岛</td><td class="my_webfont">&#xedfd;&#xe8ae;&#xeba3;&#xefab;.&#xe8ae;&#xecb2;</td><td class="my_webfont">&#xeffa;天</td></tr>

Salin selepas log masuk

这里写图片描述