免費的商用字體，99%的設計師都不知道?。ㄖ形模?/h1>

免費的商用字體，99%的設計師都不知道?。ㄖ形模?/br>

費可商用字體，一直是設計師心中永遠的痛（尤其是中文字體），今天，我們帶大家來看一波免費可商用字體。

01.思源黑體

下載地址：https://github.com/adobe-fonts/source-han-sans/(或后臺直接回復關鍵詞“思源黑體”）

思源黑體（英語：Source Han Sans）是Adobe與Google所領導開發的開源字體家族，1.001及更早版本以Apache 2.0許可證授權，而1.002及更新版本則使用SIL開源字體授權，屬于無襯線黑體。思源黑體于2014年7月16日首次發布，支持繁體中文、簡體中文、日文及韓文，并且有七種字體粗細（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy）。公開之時為當時涵蓋字符數量最多的字體，44,666個字符分屬于65,535個字形中，此為OpenType字體技術的極限。就版權而言，思源黑體不得不說是業界良心，可以免費商用，甚至于可以修改。

02.思源宋體

下載地址：https://github.com/googlei18n/noto-cjk

思源宋體是 Adobe Type 發布的最新泛 CJK 字體，它是對應于思源黑體的宋體字體；他們發布這兩種字體是為了響應統一設計的需求，以服務于東亞 15 億人口。思源宋體支持四種不同的東亞語言（簡體中文、繁體中文、日語和朝鮮語），7 種粗細類型中的每一種都有 65,535 個字形，可共同呈現一致的視覺美感。該字體還包含多個西方字形，支持拉丁語、希臘語和西里爾文腳本，這些字形均來源于 Source Serif。

03.思源柔黑體（源柔ゴシック）

下載地址：http://jikasei.me/font/genjyuu/

這個字體是基于思源黑體修改而成的，作者是日本的自家製フォント工房。

同樣的它提供了三種不同圓角程度的版本，以及七種不同粗細的版本。

04.花園明朝體

下載地址：http://fonts.jp/hanazono/

花園明朝 (Hanazono) 是一款免費字體，為 GlyphWiki 所開發，字形數量共 45090 + 47186 個，幾乎收錄了所有漢字字形。缺點是字形以日本字形為準，有一些字不符合中文書寫規范（不論是大陸規范還是港臺規范）。

05.王漢宗系列字型

下載地址：網上到處有，搜索下就有

王漢宗自由字型由研發天蠶字庫的臺灣中原大學數學系王漢宗教授先分別在2000年和2004年先后捐出十套WCL系列字型和32套新字型，全部以GNU GPL許可分發。

2005年，臺灣著名字型廠商文鼎科技認為王漢宗字型與文鼎的字型極度相似，一些自由軟件網站決定在問題明了前先移除字型下載以避免法律問題。 然而云端字型服務公司 justfont 則不認為存在授權問題，在提供字型列表中可見到 17 個王漢宗自由字型。文鼎公司覺得王漢宗有許多套字型是 copy 自文鼎字型。但是如果說是完全抄襲，也會有爭議，因為雖然骨架相同，但描繪點并不一樣，法律上頂多只能算是「疑似」抄襲。

另外就「隸書」、「仿宋」、等字型來說，文鼎公司也并非獨創，有許多字型公司的同名字型幾乎長得其實一模一樣。這么一來其實很難說誰抄誰。不過，為了避免爭議，我們在此還是列出文鼎公司主張侵權的王漢宗字型供大家參考：王漢宗中仿宋、王漢宗中仿宋簡體、王漢宗隸書體、王漢宗中明體、 王漢宗粗明體、王漢宗特明體、王漢宗細圓體、王漢宗特圓體、王漢宗迭圓體、王漢宗勘亭流、王漢宗綜藝體、王漢宗中行書、王漢宗綜藝體雙空陰、王漢宗粗楷體簡體。文鼎公司主張以上王漢宗字型侵權，使用前請斟酌。其他部分的王漢宗字體則無爭議。

06.文泉驛系列字體

下載地址：http://wenq.org/wqy2/index.cgi

文泉驛是一個開源漢字字體項目，由旅美學者房騫騫（FangQ）于2004年10月創建，集中力量解決GNU/Linux高質量中文字體匱乏的狀況。

目前，文泉驛已經開發并發布了第一個完整覆蓋GB18030漢字（包含27000多個漢字）的多規格點陣漢字字庫，第一個覆蓋GBK字符集的開源矢量字庫（文泉驛正黑），并提供了目前包含字符數目最多的開源字體——GNU Unifont——中絕大多數中日韓文相關的符號。

這些字庫已經逐漸成為主流Linux/Unix發行版中文桌面的首選中文字體。目前Ubuntu、Fedora、Slackware、Magic Linux、CDLinux使用文泉驛作為默認中文字體，Debian、Gentoo、Mandriva、ArchLinux、Frugalware則提供了官方源支持，而FreeBSD則在其ports中有提供。

目前有

清晰銳利的傳統中文界面：文泉驛點陣宋體

柔和圓潤的現代中文界面：文泉驛正黑

柔和與清晰的智能組合：文泉驛點陣正黑

兼顧中英文對齊的等寬開源字體：文泉驛等寬正黑

很小很強大的高質量矢量字體：文泉驛微米黑

經典的等寬點陣中文字體：文泉驛Unibit

07.站酷字體

下載地址：http://www.zcool.com.cn/special/zcoolfonts/#firstPage

站酷高端黑

2014年圣誕，站酷網發布了一款完全免費的中文字體“站酷高端黑”，2015年1月13日，在收集了設計師網友的意見后，站酷高端黑修訂版發布。這款制作歷時八個月的字體由站酷網字體設計師胡曉波、劉兵克發起，參與漢字百人舞100位字體設計師共同完成。全部字形以眾包的形式由分散在全國的79名設計師分別完成，包含6763個漢字、數字和英文字母。

站酷快樂體

站酷快樂體由字體設計師劉兵克及150位字體設計的朋友制作而成。這套風格輕松活潑的字體也是積站酷高端黑后，第二套由酷友集體創作完成，供所有人永久免費使用（可商用）的工藝字體。

站酷快樂體是一例風格輕松和簡單的字體，無論是筆畫結構，還是筆畫粗細，都很靈活，設計難度并不是很大。考慮到我們每個人的設計水平會有些許差別，選擇設計這樣的字體，成功率和準確率都會高很多，字與字之間的協調性統一性也更容易實現。

站酷酷黑體

由胡曉波發起，字游工作室成員進行基礎字形設計。胡曉波設計班十名學員共同設計完成。字形筆畫粗獷有力，用寬扁型的字面構建出厚重的字體形態，筆畫細節上的修飾既增強了字體的設計感，又讓字體多了一些小小的精致感，中宮的飽滿使得文字之間的排版組合非常醒目好看。包含3500個常用字，52個英文字母，10個阿拉伯數字。

ZCOOL Addict Italic

插播一個英文字體，［ZCOOL Addict Italic］站酷意大利體是由大貓Addict設計，站酷冠名的首款公益西文字庫， 是可免費商用的西文字，2016年5月發布第一版。字數：52個字母，10個數字，24個符號。使用范圍：免費授權全社會使用（包括商用）。

08.方正字庫

下載地址：https://www.foundertype.com/index.php/FindFont/index.html

不多說，方正有四款字體可以免費商用，但是需要書面授權，四個字體分別是：方正黑體、方正書宋、方正仿宋、方正楷體。

09.文鼎字體

下載地址：http://www.arphic.com.tw/zh-tw/support/index#download

以前文鼎字體有很多免費可商用的，現在也只有五個了：文鼎細上海宋繁體、文鼎中楷繁體、文鼎報宋簡體、文鼎簡中楷簡體，文鼎ＰＬ明體U20-L。

10.瀨戶字體

下載地址：https://www.dropbox.com/s/vj2yg2p5uf699fy/SetoFont.TTF?dl=0

瀨戶字體，是一款偏可愛風的字體，支持簡體中文、繁體中文、日文，包含CJK常用漢字、平片假名、JIS第一至四級，共30000余字。

11.全字庫說文解字

下載地址：http://www.cns11643.gov.tw/AIDB/download.do?name=%E5%AD%97%E5%9E%8B%E4%B8%8B%E8%BC%89

《說文解字》是中國第一部系統地分析漢字字形和考究字源的字書。許慎著，成于安帝建光元年(121年)。原書十四篇，敘目一篇，正文以小篆為主，收9353字，又古文、籀文等異體同文1163字，解釋十三萬余字。

目前采用的版本為藝文印書館所出版之《說文解字注》，系由南唐徐鉉所校定，清代段玉裁注之版本（世稱大徐本）并參考黎明文化事業公司之《說文解字注》，及南唐徐鍇所撰之《說文解字系傳》

由于說文解字原文與現行之Unicode編碼并無一完整的對應，因此無法將所有的字形收錄于本字型文件內以致于會有部份字碼無法顯示出正確字形的情形發生！(目前收錄于本字型文件內的字數共計有6721個字)

估計沒人會用，淡淡的憂傷！

12.Droid Sans Fallback

Droid Sans Fallback 是當年 Google 為推出 Android 設備時，委托臺灣華康科技（威鋒數位）為東亞各國字符設計的一款字體，承襲了 DFHeiW5-A 的設計風格，但是同時有些字形的間架結構不是很完美。之后文泉驛開始以 Droid Sans Fallback 為藍本設計出了文泉驛微米黑，可以說Droid Sans Fallback 和文泉驛微米黑有著濃厚的血緣關系。

下載這個，意義不大，直接用文泉驛微米黑就OK了

13.龐門正道標題體

下載地址：http://www.zcool.com.cn/work/ZMjA0MDg0MDA=.html

這個字體是由龐門正道以及字游空間創意工作室聯合制作的。

14.華康字體（僅阿里平臺）

下載地址：http://www.dynacw.com.cn/news/news_detail.aspx?s=7

這個啥也不說了，搭不上話了。

我大致確定是免費可商用的大概就這些了，能力有限，歡迎補充，（如有錯，請指出），另外，附上一些我不大確定的字體，據說是免費可商用的，但是我確定不了，慎重。

這些字體是在開源系統linux中找的，畢竟做開源的他們比我們更懂字體和法律！

香港參考宋體

臺灣教育部標準字體

臺大中文字體

草檀齋毛澤東字體

書體坊免費字體

戰國楚簡帛文字字體

果你接觸過Mac，或多或少會被系統的整體感所吸引，統一的UI，流暢的動畫，明朗的字體，但是Windows嘛，雖然可能很少人注意，

但邊緣真的糊糊的，也有像素感，甚至有些“殘影”。雖然這和顯示器面板特性、以及分辨率都有很大關系，畢竟按照蘋果的Retina來，27英寸動不動就4K、5K了。

▌系統字體和渲染差異

但字體本身也有影響，從Win7的中易宋體，到Vista后的微軟雅黑，設計上確實無襯線的雅黑更漂亮和諧，一套字體成本甚至高達200w美刀...

而ClearType功能，則是利用并排3個彩色子像素勾勒字體輪廓，如果字號偏小，兩側就會有彩色殘影現象，

如同賽博朋克2077里開了“色差”特效，其實這是代替了傳統的純灰度抗鋸齒，理論上有更好的精度，但實際肉眼觀感并不好，白底黑字，放完望去，盡是花花綠綠...

在Win10 1703之后，微軟重寫了GDI與字體相關部分，X和Y軸都支持抗鋸齒，橫線不再粗細不均、重心偏移、大小不一，但銳化特征依然存在，因為ClearType的初衷是讓字體清晰銳利，即使改變字形，字符形狀也應和像素契合，以防止模糊，提高可讀性，并非圓滑。而中文筆畫多，其實不適合ClearType渲染。

反觀隔壁蘋果的目標是為了還原字體設計，哪怕模糊也要保持字形，保持觀感一致。總的用下來，Windows下字體觀感跟mac的Quartz、Linux安卓的FreeType引擎的那種亞像素平滑方案，還是有差距的。

關了ClearType之后，系統默認的部分字體觀感自然了，但其他字體的渲染又會很迷，模糊、粗細不均，開不開都有各自的問題...

為了兼容性的傳統Win32環境下，依然采用ClearType/GDI渲染。而WinRT環境下的Modern UI則采用了DirectWrite渲染，比方說各種UWP應用、瀏覽器。

（被DirectWrite接管后的ClearType抗鋸齒效果其實很不錯，甚至比Mac強）

▌什么是GASP和Hinting

GASP是什么東西呢？全稱Grid-fitting and Scan conversionProcedure Table，直譯過來就是柵格擬合與掃描轉換程序表，名字長的離譜...它把矢量化的字體，光柵化處理，以適應不同分辨率、尺寸的屏幕。

主流顯示器分辨率還是1080P，往上還有2K甚至4K，在高分辨率下，我們往往需要在設置中[更改文本、應用等項目大小]，才能得到正常的顯示比例，（這里又得罵一句Win的高分屏適配蛋疼了）

微軟雅黑最佳顯示字號為14px、12px。按目前微軟雅黑的GASP表中的定義，21px（字體邊長21像素）是一個閾值，高于21px的大字，才會啟動平滑渲染，這就導致低分屏的字體，為了銳利就會“大果?！?，像素鋸齒感比較明顯。

開150%才能得到比較好的觀感，因為21px對應的是130%，但系統只有125%的縮放選項，剛好錯開，導致渲染效果不佳。

那hinting是什么呢？它是字體內置的微調信息，也就是在分辨率不匹配的時候怎么做，Win默認hinting程度較高，且關了小字號AA（抗鋸齒），這正是顯得模糊或者鋸齒感強的原因。

▌更換字體

所以網上有很多玩家暴力替換成改過GASP 表的字體，繞開hinting，直接按原字形（Glyph）渲染。（如：zhuanlan.zhihu.com/p/20194452、i.a632079.me/win10-remove-font-hinting）

但這類方案可能會有bug或者風險，而且系統更新后可能失效，需要根據自己系統版本選擇對應的字體包，并非長久之計。

我們可以通過noMeiryoUI（github.com/Tatsu-syo/noMeiryoUI/releases），替換系統默認字體、字號，

如果你的使用環境，簡繁中日英都會接觸，可以嘗試等寬的Inziu Iosevka系列字體，觀感會比較一致。也可以換用insider版本放出的蘭亭黑Pro（微軟雅黑11.3.0）。

瀏覽器可以在設置里替換字體，比較推薦的是Sarasa Gothic更紗黑體（github.com/be5invis/Sarasa-Gothic/releases）。

最簡單的字體都有很深的門道，雖然微不足道，依然值得稱道，潛移默化地改善你的使用體驗。更暴力、全局的方案，則是使用MacType，這在一些系統美化案例中非常常見，有優點，也有缺點，需要取舍，而且需要折騰，關于它的故事，我們下回再續~

參考&引用：

bilibili.com/read/cv7719200

zhuanlan.zhihu.com/p/56583542

zhuanlan.zhihu.com/p/96114832

www.joelonsoftware.com/items/2007/06/12.html

zhihu.com/question/19709748/answer/270219738

docs.microsoft.com/en-us/typography/opentype/spec/gasp

件項目實訓及課程設計指導——如何應用CSS+Div分離Web表示層數據處理和展現邏輯

1、常規的Web頁面實現方法

早期的Web應用系統開發中的Web頁面內的信息定位和Web頁面布局一般是采用HTML表格<table>標簽實現的，但由于HTML標簽本身是將數據和顯示風格混合在一起的——請見下面的表格標簽示例：

<table><tr><td>表格中的某個單元格需要顯示的數據</td></tr></table>

當每個用戶請求訪問后臺服務器時，服務器端程序都必須要將整個頁面文件的全部顯示格式控制的HTML標簽內容向客戶端的Web瀏覽器發出。如下示圖為傳統的頁面設計中利用表格定位和布局頁面內容的設計效果的示例圖

這種利用<table>標簽實現Web頁面信息定位和布局的頁面設計方法不便于Web頁面的維護修改和功能擴展，基于MVC的系統架構模式的基本思想要求將頁面中的數據和顯示風格兩者相互分離——也就是MVC體系架構設計模式中所倡導的表示和模型相互分離的設計原則。

2、J2EE Web 表示層組件JSP

JSP（Java Server Pages）是由Sun Microsystem公司（現在改為Oracle公司）于1999年6月推出的動態網站實現技術，并且是基于Java Servlet以及整個Java技術體系的Web開發技術。

而且JSP技術具有簡便和高性能、服務器無關性和可重用性等技術實現方面的特點。但JSP技術在應用方面也暴露出一些不足之處：Web頁面開發實現的人員職責不清晰、HTML標簽與JSP腳本程序混合在一起而導致Web頁面不便于維護升級和功能擴展，因為Web頁面的內容（"數據"）和表現（"HTML標簽"）耦合在一起。

如下示圖為某個JSP頁面示例，在該JSP頁面中包含有服務器端的Java程序腳本代碼、JSP標簽和HTML標簽，整個JSP頁面內容顯得比較"凌亂"，可讀性比較低。

正是由于JSP技術本身存在有這些方面的問題，能否將面向對象Java編程技術中所倡導的"封裝"、"隔離"等OOP設計思想應用于JSP Web頁面的應用開發中？目前在J2EE應用開發平臺中出現了許多完善、甚至代替JSP作為表示層的新技術。

3、采用"CSS+Div"分離J2EE Web表示層組件中的數據和表現

（1）"CSS+Div"中的CSS是頁面層疊樣式表技術

CSS（Cascading Style Sheet）是Web頁面層疊樣式表技術，利用CSS中的各種規則定義可以統一規范Web應用系統中的整體網頁的格式，而不再需要分別給每個Web頁面中的目標標簽單獨進行顯示風格的屬性設置。從而大大地減少了對Web頁面顯示風格的重復編輯、也提高了Web頁面功能的可擴展性

（2）"CSS+Div"中的Div代表<div>標簽

Div其實也就是HTML超文本標簽語言中的<div>標簽，<div>標簽主要用于構建Web頁面中區域的定義——簡單地說，也就是它能夠將Web頁面劃分為不同的功能區塊。每個功能區塊的顯示風格和其中的數據本身是相互分離的。

（3）采用"CSS+Div"分離Web表示層頁面中的數據處理邏輯和表現邏輯

由于CSS主要是實現Web頁面中的數據顯示風格，而利用<div>標簽可以包裝和定位其中的數據。因此，"CSS+Div"相互組合在一起就能夠分離Web表示層頁面文件中的數據處理邏輯和表現邏輯。

Web應用系統的表示層開發人員首先應用<div>標簽構建好每個功能區塊，之后再用CSS樣式單給各個<div>標簽統一配置相應的顯示風格——<div>標簽不僅能夠定位頁面中的文字內容，也能夠包裝圖片（圖片以背景的形式出現）或者其它形式的標簽。

<div>標簽代表要顯示的Web頁面數據的一個容器，而CSS層疊樣式表技術則能夠控制這個容器的各種顯示元素——比如高度和寬度、邊框的顏色、背景顏色以及其中的文字大小、文字顏色等等這些顯示信息。

"CSS+Div"是目前比較流行的Web頁面版面布局方式，能夠分離Web表示層頁面中的數據處理邏輯和表現邏輯、并且還能夠減少Web頁面中HTML標簽的數量、減少網絡數據的傳送量；也更便于Web頁面的維護修改和功能擴展；而且還可以為同一個Web頁面或者一組Web頁面統一定義一個CSS層疊樣式表文件或者為不同的功能區塊定義不同的CSS層疊樣式表文件，并且可以動態切換和應用不同的CSS層疊樣式表文件而產生出Web頁面"換皮膚"的應用效果。

4、為什么要應用"CSS+Div"構建Web應用系統表示層組件

（1）減少Web頁面中的重復HTML標簽和提高Web頁面的響應性能

由于采用CSS層疊樣式表技術能夠全局定義各個不同Web頁面的顯示風格，從而避免了在每個Web頁面中都內嵌有這些顯示風格的控制標簽，這樣的Web頁面設計方法能夠大大地減少Web頁面中的重復標簽的數量和提高Web頁面的響應性能。

另外，CSS層疊樣式表技術的兼容性也比較高——目前各個不同廠商的瀏覽器也都支持CSS層疊樣式表技術。一個采用"CSS+Div"技術實現的Web頁面布局可以在不同的Web瀏覽器、不同的網絡設備上都能夠正常地顯示。因此，它也方便了基于"CSS+Div"構建的Web應用系統的可擴展性和可移植性——Web頁面中需要顯示的數據及其它形式的內容與顯示設備無關。

（2）分離Web頁面的表現邏輯與數據結構定義

在實際企業應用系統的Web頁面開發中，一般再配合采用JavaScript腳本語言進行行為控制——也就是采用"CSS+Div+JavaScript"三種技術相互結合進行Web頁面開發，其中的CSS層疊樣式表技術實現Web頁面風格的顯示、Div（<div>標簽）則實現其中數據的包裝和定位、而JavaScript腳本程序代碼則實現與用戶相互交互的事件等行為的控制。

因此，采用"CSS+Div+JavaScript"三種技術相互配合進行Web頁面開發，基本上能夠達到模型視圖控制器（MVC）體系架構設計模式所倡導的"結構"、"表現"、"行為"三者相互分離的效果。

如果應用該技術，首先，將能夠使得Web頁面中的各個部分的耦合性更小、更易于維護和擴展。比如，如果希望調整Web頁面的顯示風格，設計和開發實現人員只需要改變相關的CSS層疊樣式表文件中有關的樣式表定義，而Web頁面文件本身并不需要被動地修改；其次，Web頁面的結構清晰，設計和開發實現相關的人員分工也非常明確。

5、在銀行賬戶信息管理系統頁面開發中應用CSS+Div+JavaScript技術

在示例項目銀行賬戶信息管理系統Web頁面開發中，作者應用了"CSS+Div+JavaScript"三種技術，不僅減少了每個Web頁面中的標簽總量，也將Web頁面中的格式、內容和行為三者相互分離。

另外，在銀行賬戶信息管理系統中還應用了Tiles模板技術將整個Web頁面分為不同的版塊（Tiles），而每個版塊中的Web頁面文件又采用"CSS+Div+JavaScript"技術實現，最終使得整個Web應用系統中的每個Web頁面內的HTML標簽數量都比較少，而且可重用度也都比較高。

下面的代碼示例中的Web頁面內容為示例項目銀行賬戶信息管理系統中版權信息頁面內容的示例，其中的JavaScript腳本程序實現Web頁面內容的防拷貝控制、而Web頁面的顯示風格定義由style.css樣式表文件定義——請見黑體標識的部分代碼——應用CSS+Div+JavaScript技術實現版權信息頁面內容的示例

<%@ page contentType="text/html; charset=gb2312" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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=gb2312">
          <link href='<c:url value="/css/style.css" />' type=text/css rel=stylesheet />
          <title>藍夢網上銀行系統版權信息顯示頁</title>
    </head>
    <body>
          <script type="text/javascript">
                document.body.oncopy=function (){
                setTimeout( function () {
                var text=clipboardData.getData("text");
                if (text) {
                text=text + "\r\n所復制的內容來源于"藍夢網上銀行系統"
                www.webbank.com ，原文的鏈接為："+location.href;
                clipboardData.setData("text", text);
                }}, 100 )
                }
          </script>
          <div id="globalMenuBar">
                <a href='<c:url value="/pageForwordAction.action?action=forwardIndex" />'
                class="hrefstyle">返回首頁</a> -
                <a href="#" class="hrefstyle">關于本站</a> -
                <a href="#" class="hrefstyle">網站幫助</a> -
                <a href="#" class="hrefstyle">網站聲明</a> -
                <a href="#" class="hrefstyle">服務網點</a> -
                <a href="#" class="hrefstyle">服務熱線</a> -
                <a href="#" class="hrefstyle">廣告合作</a> -
                <a href="#" class="hrefstyle">下載聲明</a> -
                <a href="#" class="hrefstyle">友情連接</a> -
                <a href="#" class="hrefstyle">網站地圖</a> -
                <a href="#" class="hrefstyle">聯系我們</a>
          </div>
    </body>
</html>

為了減少本書的篇幅，在上面的代碼示例中省略了各個超鏈接中的目標URL地址的顯示。該頁面在Macromedia Dreamweaver工具軟件中的預覽效果請見下圖示例圖所示。

6、應用支持"CSS+Div"的可視化軟件工具提高頁面開發的效率

（1）CSS Tab Designer是一款使用CSS設計導航菜單的可視化軟件

由于在"CSS Tab Designer"可視化軟件中內置有高達60多種不同風格的樣式，Web頁面開發人員只需修改現成樣式的模版文件，就能快速地生成滿足自己的Web應用系統需要的CSS菜單。如下示圖為"CSS Tab Designer"官方網站對該軟件的功能特性的介紹文字的局部截圖，讀者可以在此網站中下載該軟件，為開源共享軟件。

并且該軟件生成的XHTML標簽嚴格遵循W3C網頁標準，所創建出的CSS菜單也能夠兼容于各種主流的瀏覽器（如Internet Explorer、Firefox、Opera、Netscape等）。

讀者在成功下載該開源軟件后，在CSS Tab Designer的系統文件及目錄結構中的tab.exe文件為它的啟動程序。而在Help目錄中的文件為操作幫助指南，samples目錄內的文件為示例樣式文件，styles目錄內的文件為CSS Tab Designer內帶的各個樣式模板文件。

（2）啟動CSS Tab Designe導航菜單可視化軟件

讀者點擊所下載的CSS Tab Designe文件目錄中的tab.exe文件就可以啟動CSS Tab Designe導航菜單可視化軟件，下圖所示為啟動后的初始界面的截圖。其中在左面【項目】視圖中顯示所創建的各個頁面文件；而在中間的【標簽樣式表】視圖中提供有CSS Tab Designe可視化軟件內帶的各個模板樣式，開發人員可以直接選擇；在右面的【預覽】視圖中直接顯示開發人員所設計的結果、并能夠采用"所見即所得"方式進行開發實現。

（3）瀏覽CSS Tab Designe導航菜單可視化軟件的操作幫助指南

在CSS Tab Designe導航菜單可視化軟件提供有操作幫助指南，并且文檔的技術說明內容寫的也比較詳細和易懂——請見下圖所示的幫助文檔的局部內容的截圖。讀者可以瀏覽和閱讀CSS Tab Designe導航菜單可視化軟件的幫助文檔掌握對該軟件的使用，以提高應用CSS+Div技術進行頁面設計時的效率。

如何應用策略設計模式的思想設計通用的數據庫連接類

如何應用策略設計模式分離JDBC數據庫連接中的外部環境信息

如何應用GOF設計模式中的構建者模式創建復合對象實例

如何應用GOF設計模式中的創建型模式實現松耦合地創建對象實例

如何應用觀察者設計模式重構系統中日志處理功能實現的程序代碼

在線咨詢

上一篇：滲透測試 網站代碼審計等基礎方法篇
下一篇：「懶人編程學院」javascript的13個懶人技巧