本文介紹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
#進入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
登入後複製
我們在這裡修改映射關係，可以盡量複雜一點且沒有規律，使不容易猜出。
例如把映射關係設定為
0 => e1f21 => efab2 => eba33 => ecfa4 => edfd5 => effa6 => ef3a7 => e6f58 => ecb29 => e8ae
登入後複製
#並且把名字也依照映射關係修改，設定映射關係後，點選右下角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"></p>
登入後複製
這樣就可以顯示字元1了。
3.完整的實例代碼
<?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;映射的字元是什麼，實現了資料防採集。
當然採集者可以透過分析，知道每一個映射代表的意思，從而進行採集後轉換處理。
我們可以建立多個不同的字型檔案和映射表。每次訪問都隨機使用一種，並定期更新一批字體檔案和映射表，增加採集的難度。
這樣採集者需要把所有的字體檔案和映射表都分析並做轉換處理，才可能採集到數據，這樣採集的成本將會大大增加。
以上是利用自訂web-font實現資料防採程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
