简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  後端開發  >  利用自訂web-font實現資料防採程式碼

利用自訂web-font實現資料防採程式碼

PHPz
PHPz原創
2017-04-03 16:26:242632瀏覽

本文介紹CSS3新特性web-font的使用，並利用自訂web-font實作資料防擷取

web-font介紹

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 */}

當網頁資料需要使用特別的字體來修飾時，我們就可以使用web-font。因為使用web-font會自動從網路載入字體，並不需要使用者本機有安裝這個字體。

使用自訂web-font實作資料防擷取

防擷取原理：
#使用web-font可以從網頁載入字體，因此我們可以自己建立一套字體，設定自訂的字元對映關係表。
例如設定0xaaa是映射字元1，0xbbb是映射字元2，以此類推。
當需要顯示字元1時，網頁的源碼只會是0xaaa，被採集的也只會是0xaaa，並不是1，使採集者採集不到正確的資料。而對於正常存取的使用者則沒有影響。

對於中文的防採集不適合使用web-font這種方法，因為中文的字體庫太大。而對於數字，英文則適合使用此方法進行防採集。

實例：使用自訂web-font實現數位資料防擷取（例如股票，電影票房等資料）

#1.建立指定字元的自訂字體

首先選擇一款字體，為方便演示，選擇系統自帶的Arial字體。

ttf轉svg

利用自訂web-font實現資料防採程式碼

#進入everythingfonts.com/ttf-to-svg  
上傳ttf文件，將字體文件轉為svg格式，另存為my_webfont.svg

選擇需要使用的字元及設定字體映射關係

利用自訂web-font實現資料防採程式碼

#進入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

我們在這裡修改映射關係，可以盡量複雜一點且沒有規律，使不容易猜出。

例如把映射關係設定為

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

利用自訂web-font實現資料防採程式碼

#並且把名字也依照映射關係修改，設定映射關係後，點選右下角download下載字型。

把下載的字型檔案全部命名為my_webfont.*

#2.在網頁中使用web-font顯示資料

首先需要設定@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的class，font-family使用這個web-font

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

在需要顯示這種數據的地方，填入數據，且容器的class定義為my_webfont

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

這樣就可以顯示字元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>

在瀏覽器存取可以看到正常的資料

利用自訂web-font實現資料防採程式碼

但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>

利用自訂web-font實現資料防採程式碼

#採集者只能取得到類似 edfd;的數據，並不能知道 edfd;映射的字元是什麼，實現了資料防採集。

當然採集者可以透過分析，知道每一個映射代表的意思，從而進行採集後轉換處理。
我們可以建立多個不同的字型檔案和映射表。每次訪問都隨機使用一種，並定期更新一批字體檔案和映射表，增加採集的難度。
這樣採集者需要把所有的字體檔案和映射表都分析並做轉換處理，才可能採集到數據，這樣採集的成本將會大大增加。

以上是利用自訂web-font實現資料防採程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：PHP實作資料擷取的三種方法下一篇：PHP實作資料擷取的三種方法

相關文章

看更多