編程VS工具，Html5地圖你選誰？

們進行數據分析時，為了讓數據分析的結果更好的呈現，我們會選擇數據可視化。

地圖可視化實現的工具有多種，我們今天就單挑兩個一個是編程，一個是可以畫Html5地圖的可視化工具，這里拿億信華辰的ABI為例子。

編程：

看看上海的地鐵圖。

文本提示

首先，把鼠標移到站點、路段、圖標等位置，都會有文本提示彈出。

站點圖標變化

當鼠標移到站點上時，站點圖標做了放大效果，這個效果很貼心，

實現的方法也很簡便，就是在注冊站點矢量圖形時，加入了動態判斷。以下注冊普通站點矢量圖形的代碼：

twaver.Util.registerImage('station',{
    w: linkWidth*1.6,
    h: linkWidth*1.6,
    v: function (data, view) {
        var result = [];
        if(data.getClient('focus')){
            result.push({
                shape: 'circle',
                r: linkWidth*0.7,
                lineColor:  data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
            result.push({
                shape: 'circle',
                r: linkWidth*0.2,
                fill:  data.getClient('lineColor'),
            });
        }else{
            result.push({
                shape: 'circle',
                r: linkWidth*0.6,
                lineColor: data.getClient('lineColor'),
                lineWidth: linkWidth*0.2,
                fill: 'white',
            });
        }
        return result;
    }
});

動畫效果

從上圖還可以看到，在換乘站圖標中，除了增加了顏色，還實現了旋轉效果。。來看代碼：

1.    twaver.Util.registerImage('rotateArrow', {
2.        w: 124,
3.        h: 124,
4.        v: [{
5.            shape: 'vector',
6.            name: 'doubleArrow',
7.            rotate: 360,
8.            animate: [{
9.                attr: 'rotate',
10.                to: 0,
11.                dur: 2000,
12.                reverse: false,
13.                repeat: Number.POSITIVE_INFINITY
14.            }]
15.        }]
16.    });

億信ABI

主干線圖，世界航線線路一目了然~

△主干線圖

標點地圖，如對去過的城市進行標點著重突出。

△標點地圖

渲染地圖，可以看出投放資金的分布情況。

△資金投放分布圖

流向圖，清晰的看出從各個地區流向北京的情況。

△流向地圖

疫情大屏

可能你沒想到，使用億信ABI只需要簡單的托拉拽就可以！不需要大串大串的代碼就能輕松實現！還等什么呢！你也可以去體驗！

為互聯網的基石之一，HTML5（Hypertext Markup Language 5）引入了一系列前沿特性，為開發者提供了無限的創意空間和更深層次的探索。在本文中，華妹將深入解讀HTML5的一些最引人注目的新特性以及它們的潛力。

1. 語義化標簽

HTML5通過引入諸如`<header>`、`<nav>`、`<article>`和`<footer>`等新的語義化標簽，提供了更加精確和結構化的文檔描述。

這不僅增加了網頁的可讀性，還改進了搜索引擎優化（SEO）和可訪問性。開發者可以更準確地描述網頁內容，使搜索引擎更容易理解頁面的結構。

2. 視頻和音頻支持

HTML5為嵌入式媒體提供了原生支持，不再依賴于陳舊的插件，如Flash。

通過`<video>`和`<audio>`標簽，開發者可以輕松地嵌入視頻和音頻內容，并以標準的方式控制媒體播放。這為多媒體豐富的Web應用程序帶來了新的可能性，而無需用戶額外地安裝或配置。

3. 本地存儲

HTML5引入了Web Storage和IndexedDB，這些本地存儲機制允許開發者在客戶端存儲數據，提高了性能并支持離線訪問。

這對于構建離線Web應用程序或緩存大量數據的應用非常有利。同時，這些新特性提供了更安全的存儲機制，不會像傳統的cookie一樣容易受到跨站點腳本攻擊。

4. Canvas繪圖

HTML5的`<canvas>`元素為開發者提供了在網頁上進行動態圖形和動畫繪制的能力。

通過JavaScript，您可以輕松創建交互式圖表、數據可視化和游戲。這為用戶提供了更引人入勝的網頁體驗，并吸引了廣泛的應用領域，從數據科學到教育。

5. 新的表單元素

HTML5引入了一系列新的表單元素，如`<input type="date">`、`<input type="email">`和`<input type="url">`，簡化了用戶輸入和數據驗證。這些元素不僅提高了用戶體驗，還減少了開發者在前端驗證方面的工作量。

6. 高級的地理位置API

HTML5的地理位置API允許Web應用程序訪問用戶的位置信息，從而創造了各種基于位置的應用，如地圖導航、社交媒體定位和周邊服務推薦。這一功能為個性化和本地化體驗提供了強有力的支持。

7. Web Workers

HTML5引入的Web Workers允許在后臺運行JavaScript線程，提高了網頁的性能和響應能力。

這對于處理復雜計算、多線程任務以及實時數據更新至關重要，為現代Web應用程序帶來了巨大的潛力。

8. 支持SVG

HTML5對可伸縮矢量圖形（SVG）提供了原生支持，這是一種用于創建矢量圖形的XML格式。

SVG允許開發者創建高質量的圖形和動畫，并與其他HTML元素進行無縫集成。這為創建復雜的數據可視化和引人入勝的交互體驗提供了強大的工具。

結論

HTML5的新特性推動了Web開發的不斷發展，并為開發者提供了更多的創新機會。這些新特性不僅增強了網頁的功能和性能，還提高了用戶體驗和可訪問性。

在不斷演進的Web領域中，深入了解和充分利用HTML5的潛力是每位現代開發者的必備技能。隨著HTML5的不斷發展，我們可以期待更多驚喜和創新的出現，為Web的未來鋪平道路。

做手機端 Web App 項目中,經常會遇到小圖標在手機上顯示比較模糊的問題，經過實踐發現了一種比較好的解決方案，圖標字體化。在微社區項目中，有很多小的 Icon（圖標），如分享、回復、贊、返回、話題、訪問、箭頭等，這些 Icon（圖標）一般都是純色的。開始制作時考慮用雙倍大小的 Sprite 圖，通過 CSS 樣式設置只顯示二分之一尺寸，這樣在 Retina 屏上顯示的大小是正常的，一旦放大屏幕后圖標又變得模糊不清，測試的效果不是很理想，后來又考慮多套圖標適配方案、SVG 矢量圖等，都因為種種原因放棄掉了（如多套圖標繁瑣、Android 2.3不支持 SVG 格式等），為了解決以上問題，用到了圖標字體，下圖為微社區用到的部分圖標字體。

大家可能在網上看過很多關于矢量圖標制作的教程，而且大多是技術同學分享的技術貼。整個過程也相對比較簡單。在這里我們將深入地向大家講述字體圖標制作的規范流程和注意事項，很多內容是現在網上沒有的，純粹是阿里媽媽 MUX 這兩年摸索出來的。阿里媽媽 MUX 在國內首家推出了在線生成字體圖標平臺，省去了設計師不太擅長的字體制作過程，所以在本教程中我們就不再詳細介紹如何使用字體制作工具制作字體圖標的過程，更多的是介紹如何在 AI 工具中制作一個規范的字體圖標。

一、制作前基礎知識普及

1、在制作圖標前請下載由阿里媽媽 MUX 提供的矢量圖標制作模板；立即下載

2、盡量使用 illustrator 制作矢量圖標；有些設計師在 ps 中使用路徑繪制圖標再導成 SVG，這種方式也是可以的，但是有時會出現一些奇怪的現象，如圖形的路徑混亂了，圖標傾斜了等不可預知的情況，所以還是建議大家在 illustrator 中繪制矢量圖標；

3、將 illustrator 中繪制的圖形另存為 SVG 格式；最初 iconfont 平臺是支持 EPS 文件上傳的，但是考慮到 EPS 文件在平臺生成過程的不穩定性，所以現在統一采用 SVG 格式；illustrator 中 SVG 格式導出具體教程>> iconfont

4、在繪制圖標的過程中不要使用 AI 圖形模塊的旋轉、鏡像等功能，整個繪制過程最好使用鋼筆工具繪制；^^

5、避免出現圖形繪制過中斷點的現象。

6、不可以用色彩疊加的方式來達到模塊造型；

二、圖標柵格

數字形態下，字符是用抽象化的圖案繪制成的。當文本顯示在屏幕上時，位置非常精確，理想的字體形狀需要用一定數量的像素柵格顯示。圖標設計師常用柵格來控制圖標組成元素的比例關系；但是我們在矢量圖標制作過程中引入柵格概念主要目的是模擬字體圖標在不同尺寸下的展現效果，以達到優化的作用；也就是說圖標設計的時候我們用柵格來模擬像素，一個格子就是一個像素，一個圖標需要一定數量的像素組成。

舉個例子：一個16X16圖標，在16X16個像素中通過像素著色的方式把圖形表達出來；

那有同學就要問了，通過這樣的柵格能達到什么樣的優化效果呢？首先我們來了解一下文字的渲染策略，看組圖：

從左到右依次）理想的渲染狀態、黑白渲染、灰度渲染、次像素渲染

上圖左側第一張是我們認為一種比較理想的渲染效果，但是通過剛才我們介紹柵格我們可以了解到這種狀態是不可能的，因為第一代黑白渲染和第二代灰度渲染是不可能做到顯示半格像素或一個像素中顯示弧度的。

黑白渲染和灰度渲染在渲染圖形遇到半格像素或則弧度的時候，他們會有各自不同的處理方式；舉個例子：

如上圖紅點處像素，我們理解他是有弧度的，且不占滿一個像素；各個渲染方式的處理辦法如下：

黑白渲染

黑白渲染相對來說比較粗暴，直接通過四舍五入的形式把這里要描繪的圖形不顯示了；（黑白渲染的形式主要應用于打印機渲染，但是打印機本身的精度非常高，所以打印出來的圖形還是很細膩的）

灰度渲染

灰度渲染顯得就智能一些了，他通過灰度降級的方式來表達，如果占不到一個像素

那就根據他占的面積來降低這個像素的灰度；占的面積越小灰度就越低；

次像素渲染

次像素渲染是第三代渲染方式，相對來說比較高級，他從從左至右將一個像素分成三份；用不同的色彩值來顯示圖形，這樣圖形看起來就更加細膩；

通過了解剛才三種渲染模式對不滿一個像素的處理方式，我們就會發現，當我們繪制圖標的時候，如果沒有把控好圖標邊緣線在真實場景下渲染的情況，就會被系統進行降級渲染。所以我們更希望能飽滿完整的顯示一個像素。我們來看一組效果：

從上組圖中我們可以看出左側圖形的邊都剛好落在完成的像素中，未出現不足一個像素的現象（圓角除外），右側則未考慮像素柵格的問題；圖標在16X16像素大小的應用中很明顯感覺到左側的小圖標比右側的小圖標要清晰很多；這是因為右側的圖標的邊本來是需要2個像素顯示的，但是卻落在了3個像素上，渲染的時候出現了一個像素是未降級灰度顯示，其他兩個像素進行了不同級別的灰度降級。這樣我們就會覺得右側的小圖標有點模糊且變粗了。所以在制作圖標的時候我們需要引入柵格，去模擬像素點，然后避免圖標的線或邊不要出現落在半個像素上的情況；

了解到了柵格對于圖標優化的重要性，那怎么制作一個能模擬真實像素環境下的柵格呢？

首先我們得了解一下基準框；基準框的作用是為字體矢量圖標提供一個大小參考，

如：在16px 像素大小的一個逗號“，”和一個文字“圖”的大小和所處的位子是不一樣的，這就是因為他們都是在同一套基準框中繪制的圖形，才得到相對大小的概念，不然大家同時矢量圖標，怎么區別大小呢？

每套字體都有自己不同的基準框，要根據實際設計需要設定，沒有嚴格規定；阿里巴巴矢量圖標庫在制定基準框的時候考慮到圖標展現的標準尺寸：16X16、32X32、64X64、128X128；特設置了一個可以整除他們的尺寸：1024X1024（大家可以通過下載我們制作好的“圖標制作模板”獲得已經設置好基準框的模板）

根據實際應用的像素大小選擇柵格；

如：你要制作一套16X16像素大小的字體圖標應用于網站或 app，那么我們建議您在16X16的柵格中繪制，那么16像素2的 n 倍都能應用，這樣圖標的邊框就不會落在半個像素上，避免出現虛邊、加粗等現象。（在 retina 屏下不用擔心圖標的虛邊問題，由于顯示精度非常高，圖標表現得非常細膩。）

那如果要制作一個非標尺寸的圖標，如：18X18大小的圖標怎么辦呢？

我們可以通過在 AI 中修改柵格來實現模擬，如下圖：

在 AI 設置中調出參考線和網格設置設置項，然后拿出你的計算機：1024/X=?把算出來的值盡可能精確的填入網格線間隔這項中，這樣你可以模擬在實際應用大小場景中要顯示的圖形像素點了。

三、實例操作

1、下載模板

2、在 AI 中刪除模板的示例圖，根據柵格繪制圖形；

3、將 AI 中繪制好的圖形另存為 SVG

4、打開 iconfont.cn 網站并把保存好的 SVG 文件拖入上傳框中

5、完成上傳，這樣就獲得了一個矢量的字體圖標

使用圖標字體的優勢和劣勢

字體圖標除了圖像清晰度之外，比位圖還有哪些優勢呢?

1、輕量性：

一個圖標字體比一系列的圖像（特別是在 Retina 屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少 HTTP 請求，還可以配合 HTML5離線存儲做性能優化。

2、靈活性：

圖標字體可以用過 font-size 屬性設置其任何大小，還可以加各種文字效果，包括顏色、Hover 狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個不同大小和不同效果的圖像輸出一個不同文件。

3、兼容性：

網頁字體支持所有現代瀏覽器，包括 IE 低版本。詳細兼容性可以點擊這里。

除了以上優勢之外，當然也有劣勢

1、圖標字體只能被渲染成單色或者 CSS3的漸變色，由于此限制使得它不能廣泛使用。

2、使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。

3、創作自已的字體圖標很費時間，重構人員后期維護的成本偏高。

如何獲取圖標字體及使用

要想獲取圖標字體，不外乎兩種途徑，其一找到付費網站購買，其二就是到免費網站下載，提供免費下載網站很多，神飛曾經發表過一篇博客 iconfont 大搜羅，上面羅列好多的免費網站的地址，大家有興趣可以去下載。

如何使用呢？一般來說，有3種方法：

1、把字符直接寫在 HTML 文件里

這個方法是簡單比較直觀，見如下代碼，用一個 <span>元素去包含一個字符“!”(或!)，然后給這個<span>添加一個類。這個字母在選定的字體中被映射到一個特定的圖標。

o <a href=”javascript：;”><span cass=”icon”>!</span>贊</a><a href=” javascript：;”><span cass=”icon”>!</span>贊</a>

為了顯示效果，還需要編寫樣式類.Icon 來決定此字符以哪種字體來顯示，如下：

o .icon {font-family: ‘ your-incofont -name ‘;}

2、使用 css 來生成內容

它不直接在 HTML 文件里添加字符，而是用 CSS 來生成字符內容。代碼如下

可以看出，添加了一個類名“praise”。神奇的事就發生在 CSS 中，跟上面一樣，第一步先定義好字體，然后使用:before 偽元素來產生字符圖標，其中“before”表示字符出現在左邊，“after”則出現在右邊。

o .icon {font-family: ’ your-incofont-name ’ ;}.praise:before {content:“\f00a”; }

3、用 data-icon 屬性

還有一種跟上面相似方法是使用 HTML5的“data-”屬性。如：創建一個 data-icon 屬性。

aria-hidden=”true”是為了防止被閱讀器直接把字符讀取出來，不是對所有的平臺都奏效。

o <a href=”javascript：;”><span aria-hidden=”true” data-icon=”!”></span>贊</a>

結合一些搭配使用的 CSS 屬性，可以寫成如下代碼

o [data-icon]:before {font-family: ‘ your-incofont-name ’ ; content:attr(data-icon);speak:none;}

制作自已圖標字體

以上是免費圖標字體使用的幾種方法，下面看看如何制作屬于自己的圖標字體。

1、首先需要有創建矢量圖標的軟件，并且能夠輸出 SVG 格式，比如 “Illustrator ”或者“Inkscape”。也可以用 Photoshop 的路徑工具畫出所需要的圖標，然后導出路徑到 Illustrator 里去填色。下圖為 Adobe Illustrator 軟件。

注意一定是封閉的路徑，不能是單路徑描邊，如果是單路徑的話生成字體圖標后會顯示不出來。兩個以上的圖形要合并、圖形盡減少節點使用。如下圖，中間的圖(嘴巴部分)為單路徑描邊（不封閉）,導入圖標生成器后會如右圖所示，嘴巴部分顯示不出來。

2、圖標制作完成后，選擇 “文件”菜單中“保存”，把文件保存成“SVG”格式。使用默認的 SVG 設置。

3、把 SVG 格式的圖標導入到 icomoon、fontello、iconfont 字體生成器中，去生成所要的圖標字體，以下介紹一下幾種字體生成器的用法：

（1）圖標字體生成器

IcoMoon！一個可以通過個性化設置來創建自定義圖標（字體）的生成器！ IcoMoon 是一項免費的服務，通過使用不同設置使我們能夠創建自定義的 Icon 圖或 Icon 字體。除了自定義 Icon 外，IcoMoon 也有自己免費的海量圖標集，都非常贊。

打開地址，點擊 Start the App 按鈕。

點擊 Import Icons 按鈕導入 SVG 圖標，導入后對圖標進行相關的操作，如選中、刪除、移動、編輯等。

編輯完成后，就可以進行下載了，它提供兩種下載方式：圖片版和字體版！圖片版是經過 CSS Sprites 技術處理的 PNG 格式，字體版有多種格式供我們選擇（EOT,SVG,WOFF,TTF）。

如果要兼容 IE7以下瀏覽器，請在設置里勾選 Support IE7(and older)選項，會生成一個單獨 JS、CSS 文件。

下載 ZIP 包后，解壓后會得到如下圖的文件。將 fonts 文件夾復制到你的網站，為項目添加字體。

從 style.css 文件中復制 CSS 樣式，并粘貼到你網站的 CSS 文件中，也可以單獨存成一個樣式文件。

復制完成后，在 CSS 文件中找到@font-face，將 URL 路徑修改成你本地的相對路徑。

字體和路徑都設置完成后，在 HTML 頁面只需調用相對應的 class 就可以了。如果想兼容 IE7瀏覽器，需引用 IE7目錄的 js。如：

調用 class：<span class=”icon icon-add”></span>

調用 js：<script src=”ie7/ie7.js”></script>

（2）圖標字體生成器

它的生成方式與上面的類同，這里不做介紹，很容易上手。

（3）ISUX 矢量字體圖標庫

ISUX 矢量字體庫目前提供了豐富的字體圖標，可以供下載使用，暫時還不支持自定義圖標的導入，期待不久的將來它的功能會越來越完善。大家有什么好的建議和想法可以聯系他們。

通過以上幾種生成器的生成圖標字體，加上用 CSS 對其大小、顏色、透明度、陰影、Transition 各種變換等控制，不僅可以縮放自如，制作出各種特殊效果，而且還很容易維護，可以通過多種不同的途徑對它們進行操作。相信大家已經體驗到他的強大之處，滿足日常工作需要應該已經足夠了。雖然有這么多優點，但圖標字體并不是完美的，也存在些缺點。如：只能被渲染成單色的問題、屏幕閱讀器(雖然有解決方法，但并不完善)的問題、性能問題等等，等待著我們去發現和解決。相信未來會有更好的解決方案，比如：SVG（可伸縮矢量圖形），未來可能取代位圖的圖形技術等。

立足現在，放眼未來。最后對目前的圖標字體生成器工具做一下展望吧！

■ 能夠支持導入更多的自定義格式，如 EPS、AI 等格式。

■ 能夠引入項目管理的機制，在同一帳號可以同時管理多個項目圖標。

■ 提供更多免費、豐富的圖標字體供下載使用。

FAQ

1、跨域問題：

（1）通過配置自己的服務器。

# For Apache

<FilesMatch “.(eot|ttf|otf|woff)”>Header set Access-Control-Allow-Origin “*” </FilesMatch>

# For nginx

location ~* \.(eot|ttf|woff)$ {add_header Access-Control-Allow-Origin *;}

（2）放在同一個域下。

（3）使用 base64 置入 CSS 中 (Icomoon 在導出圖標時，設置里勾選Encode & Embed Font in CSS 選項)。

2、字體圖標出現鋸齒的問題：

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

3、@font-face 與性能：

關于@font-face 的性能問題，可以參考以下文章。

原文地址：www.stevesouders.com

翻譯地址：www.cnblogs.com

文章內的建議和總結:

（1）只在你確定你非常需要 @font-face 的時候才使用它;

（2）將你的@font-face 定義在所有的 script 標簽前;

（3）如果你有許多字體文件，考慮將它們分散到幾個域名下;

（4）不要包含沒有使用的 @font-face 聲明——IE 將不分它使用與否，通通加載;

（5）Gzip 字體文件，同時給它們一個未來的過期頭部聲明;

（6）考慮字體文件的后加載，起碼對于 IE。

在線咨詢

上一篇：前端程序員實現在線預覽pdf、word、xls、ppt等文件，超實用！
下一篇：HTML 音頻/視頻 DOM 參考手冊

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

編程VS工具，Html5地圖你選誰？

您的項目需求