整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
費(fèi)可商用字體，一直是設(shè)計(jì)師心中永遠(yuǎn)的痛（尤其是中文字體），今天，我們帶大家來看一波免費(fèi)可商用字體。
下載地址：https://github.com/adobe-fonts/source-han-sans/(或后臺(tái)直接回復(fù)關(guān)鍵詞“思源黑體”）
思源黑體（英語(yǔ)：Source Han Sans）是Adobe與Google所領(lǐng)導(dǎo)開發(fā)的開源字體家族，1.001及更早版本以Apache 2.0許可證授權(quán)，而1.002及更新版本則使用SIL開源字體授權(quán)，屬于無(wú)襯線黑體。思源黑體于2014年7月16日首次發(fā)布，支持繁體中文、簡(jiǎn)體中文、日文及韓文，并且有七種字體粗細(xì)（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy）。公開之時(shí)為當(dāng)時(shí)涵蓋字符數(shù)量最多的字體，44,666個(gè)字符分屬于65,535個(gè)字形中，此為OpenType字體技術(shù)的極限。就版權(quán)而言，思源黑體不得不說是業(yè)界良心，可以免費(fèi)商用，甚至于可以修改。
下載地址：https://github.com/googlei18n/noto-cjk
思源宋體是 Adobe Type 發(fā)布的最新泛 CJK 字體，它是對(duì)應(yīng)于思源黑體的宋體字體；他們發(fā)布這兩種字體是為了響應(yīng)統(tǒng)一設(shè)計(jì)的需求，以服務(wù)于東亞 15 億人口。思源宋體支持四種不同的東亞語(yǔ)言（簡(jiǎn)體中文、繁體中文、日語(yǔ)和朝鮮語(yǔ)），7 種粗細(xì)類型中的每一種都有 65,535 個(gè)字形，可共同呈現(xiàn)一致的視覺美感。該字體還包含多個(gè)西方字形，支持拉丁語(yǔ)、希臘語(yǔ)和西里爾文腳本，這些字形均來源于 Source Serif。
下載地址：http://jikasei.me/font/genjyuu/
這個(gè)字體是基于思源黑體修改而成的，作者是日本的自家製フォント工房。
同樣的它提供了三種不同圓角程度的版本，以及七種不同粗細(xì)的版本。
下載地址：http://fonts.jp/hanazono/
花園明朝 (Hanazono) 是一款免費(fèi)字體，為 GlyphWiki 所開發(fā)，字形數(shù)量共 45090 + 47186 個(gè)，幾乎收錄了所有漢字字形。缺點(diǎn)是字形以日本字形為準(zhǔn)，有一些字不符合中文書寫規(guī)范（不論是大陸規(guī)范還是港臺(tái)規(guī)范）。
下載地址：網(wǎng)上到處有，搜索下就有
王漢宗自由字型由研發(fā)天蠶字庫(kù)的臺(tái)灣中原大學(xué)數(shù)學(xué)系王漢宗教授先分別在2000年和2004年先后捐出十套WCL系列字型和32套新字型，全部以GNU GPL許可分發(fā)。
2005年，臺(tái)灣著名字型廠商文鼎科技認(rèn)為王漢宗字型與文鼎的字型極度相似，一些自由軟件網(wǎng)站決定在問題明了前先移除字型下載以避免法律問題。 然而云端字型服務(wù)公司 justfont 則不認(rèn)為存在授權(quán)問題，在提供字型列表中可見到 17 個(gè)王漢宗自由字型。文鼎公司覺得王漢宗有許多套字型是 copy 自文鼎字型。但是如果說是完全抄襲，也會(huì)有爭(zhēng)議，因?yàn)殡m然骨架相同，但描繪點(diǎn)并不一樣，法律上頂多只能算是「疑似」抄襲。
另外就「隸書」、「仿宋」、等字型來說，文鼎公司也并非獨(dú)創(chuàng)，有許多字型公司的同名字型幾乎長(zhǎng)得其實(shí)一模一樣。這么一來其實(shí)很難說誰(shuí)抄誰(shuí)。不過，為了避免爭(zhēng)議，我們?cè)诖诉€是列出文鼎公司主張侵權(quán)的王漢宗字型供大家參考：王漢宗中仿宋、王漢宗中仿宋簡(jiǎn)體、王漢宗隸書體、王漢宗中明體、 王漢宗粗明體、王漢宗特明體、王漢宗細(xì)圓體、王漢宗特圓體、王漢宗迭圓體、王漢宗勘亭流、王漢宗綜藝體、王漢宗中行書、王漢宗綜藝體雙空陰、王漢宗粗楷體簡(jiǎn)體。文鼎公司主張以上王漢宗字型侵權(quán)，使用前請(qǐng)斟酌。其他部分的王漢宗字體則無(wú)爭(zhēng)議。
下載地址：http://wenq.org/wqy2/index.cgi
文泉驛是一個(gè)開源漢字字體項(xiàng)目，由旅美學(xué)者房騫騫（FangQ）于2004年10月創(chuàng)建，集中力量解決GNU/Linux高質(zhì)量中文字體匱乏的狀況。
目前，文泉驛已經(jīng)開發(fā)并發(fā)布了第一個(gè)完整覆蓋GB18030漢字（包含27000多個(gè)漢字）的多規(guī)格點(diǎn)陣漢字字庫(kù)，第一個(gè)覆蓋GBK字符集的開源矢量字庫(kù)（文泉驛正黑），并提供了目前包含字符數(shù)目最多的開源字體——GNU Unifont——中絕大多數(shù)中日韓文相關(guān)的符號(hào)。
這些字庫(kù)已經(jīng)逐漸成為主流Linux/Unix發(fā)行版中文桌面的首選中文字體。目前Ubuntu、Fedora、Slackware、Magic Linux、CDLinux使用文泉驛作為默認(rèn)中文字體，Debian、Gentoo、Mandriva、ArchLinux、Frugalware則提供了官方源支持，而FreeBSD則在其ports中有提供。
目前有
清晰銳利的傳統(tǒng)中文界面：文泉驛點(diǎn)陣宋體
柔和圓潤(rùn)的現(xiàn)代中文界面：文泉驛正黑
柔和與清晰的智能組合：文泉驛點(diǎn)陣正黑
兼顧中英文對(duì)齊的等寬開源字體：文泉驛等寬正黑
很小很強(qiáng)大的高質(zhì)量矢量字體：文泉驛微米黑
經(jīng)典的等寬點(diǎn)陣中文字體：文泉驛Unibit
下載地址：http://www.zcool.com.cn/special/zcoolfonts/#firstPage
站酷高端黑
2014年圣誕，站酷網(wǎng)發(fā)布了一款完全免費(fèi)的中文字體“站酷高端黑”，2015年1月13日，在收集了設(shè)計(jì)師網(wǎng)友的意見后，站酷高端黑修訂版發(fā)布。這款制作歷時(shí)八個(gè)月的字體由站酷網(wǎng)字體設(shè)計(jì)師胡曉波、劉兵克發(fā)起，參與漢字百人舞100位字體設(shè)計(jì)師共同完成。全部字形以眾包的形式由分散在全國(guó)的79名設(shè)計(jì)師分別完成，包含6763個(gè)漢字、數(shù)字和英文字母。
站酷快樂體
站酷快樂體由字體設(shè)計(jì)師劉兵克及150位字體設(shè)計(jì)的朋友制作而成。這套風(fēng)格輕松活潑的字體也是積站酷高端黑后，第二套由酷友集體創(chuàng)作完成，供所有人永久免費(fèi)使用（可商用）的工藝字體。
站酷快樂體是一例風(fēng)格輕松和簡(jiǎn)單的字體，無(wú)論是筆畫結(jié)構(gòu)，還是筆畫粗細(xì)，都很靈活，設(shè)計(jì)難度并不是很大。考慮到我們每個(gè)人的設(shè)計(jì)水平會(huì)有些許差別，選擇設(shè)計(jì)這樣的字體，成功率和準(zhǔn)確率都會(huì)高很多，字與字之間的協(xié)調(diào)性統(tǒng)一性也更容易實(shí)現(xiàn)。
站酷酷黑體
由胡曉波發(fā)起，字游工作室成員進(jìn)行基礎(chǔ)字形設(shè)計(jì)。胡曉波設(shè)計(jì)班十名學(xué)員共同設(shè)計(jì)完成。字形筆畫粗獷有力，用寬扁型的字面構(gòu)建出厚重的字體形態(tài)，筆畫細(xì)節(jié)上的修飾既增強(qiáng)了字體的設(shè)計(jì)感，又讓字體多了一些小小的精致感，中宮的飽滿使得文字之間的排版組合非常醒目好看。包含3500個(gè)常用字，52個(gè)英文字母，10個(gè)阿拉伯?dāng)?shù)字。
ZCOOL Addict Italic
插播一個(gè)英文字體，［ZCOOL Addict Italic］站酷意大利體是由大貓Addict設(shè)計(jì)，站酷冠名的首款公益西文字庫(kù)， 是可免費(fèi)商用的西文字，2016年5月發(fā)布第一版。字?jǐn)?shù)：52個(gè)字母，10個(gè)數(shù)字，24個(gè)符號(hào)。使用范圍：免費(fèi)授權(quán)全社會(huì)使用（包括商用）。
下載地址：https://www.foundertype.com/index.php/FindFont/index.html
不多說，方正有四款字體可以免費(fèi)商用，但是需要書面授權(quán)，四個(gè)字體分別是：方正黑體、方正書宋、方正仿宋、方正楷體。
下載地址：http://www.arphic.com.tw/zh-tw/support/index#download
以前文鼎字體有很多免費(fèi)可商用的，現(xiàn)在也只有五個(gè)了：文鼎細(xì)上海宋繁體、文鼎中楷繁體、文鼎報(bào)宋簡(jiǎn)體、文鼎簡(jiǎn)中楷簡(jiǎn)體，文鼎ＰＬ明體U20-L。
下載地址：https://www.dropbox.com/s/vj2yg2p5uf699fy/SetoFont.TTF?dl=0
瀨戶字體，是一款偏可愛風(fēng)的字體，支持簡(jiǎn)體中文、繁體中文、日文，包含CJK常用漢字、平片假名、JIS第一至四級(jí)，共30000余字。
下載地址：http://www.cns11643.gov.tw/AIDB/download.do?name=%E5%AD%97%E5%9E%8B%E4%B8%8B%E8%BC%89
《說文解字》是中國(guó)第一部系統(tǒng)地分析漢字字形和考究字源的字書。許慎著，成于安帝建光元年(121年)。原書十四篇，敘目一篇，正文以小篆為主，收9353字，又古文、籀文等異體同文1163字，解釋十三萬(wàn)余字。
目前采用的版本為藝文印書館所出版之《說文解字注》，系由南唐徐鉉所校定，清代段玉裁注之版本（世稱大徐本）并參考黎明文化事業(yè)公司之《說文解字注》，及南唐徐鍇所撰之《說文解字系傳》
由于說文解字原文與現(xiàn)行之Unicode編碼并無(wú)一完整的對(duì)應(yīng)，因此無(wú)法將所有的字形收錄于本字型文件內(nèi)以致于會(huì)有部份字碼無(wú)法顯示出正確字形的情形發(fā)生！(目前收錄于本字型文件內(nèi)的字?jǐn)?shù)共計(jì)有6721個(gè)字)
估計(jì)沒人會(huì)用，淡淡的憂傷！
Droid Sans Fallback 是當(dāng)年 Google 為推出 Android 設(shè)備時(shí)，委托臺(tái)灣華康科技（威鋒數(shù)位）為東亞各國(guó)字符設(shè)計(jì)的一款字體，承襲了 DFHeiW5-A 的設(shè)計(jì)風(fēng)格，但是同時(shí)有些字形的間架結(jié)構(gòu)不是很完美。之后文泉驛開始以 Droid Sans Fallback 為藍(lán)本設(shè)計(jì)出了文泉驛微米黑，可以說Droid Sans Fallback 和文泉驛微米黑有著濃厚的血緣關(guān)系。
下載這個(gè)，意義不大，直接用文泉驛微米黑就OK了
下載地址：http://www.zcool.com.cn/work/ZMjA0MDg0MDA=.html
這個(gè)字體是由龐門正道以及字游空間創(chuàng)意工作室聯(lián)合制作的。
下載地址：http://www.dynacw.com.cn/news/news_detail.aspx?s=7
這個(gè)啥也不說了，搭不上話了。
我大致確定是免費(fèi)可商用的大概就這些了，能力有限，歡迎補(bǔ)充，（如有錯(cuò)，請(qǐng)指出），另外，附上一些我不大確定的字體，據(jù)說是免費(fèi)可商用的，但是我確定不了，慎重。
這些字體是在開源系統(tǒng)linux中找的，畢竟做開源的他們比我們更懂字體和法律！
香港參考宋體
臺(tái)灣教育部標(biāo)準(zhǔn)字體
臺(tái)大中文字體
草檀齋毛澤東字體
書體坊免費(fèi)字體
戰(zhàn)國(guó)楚簡(jiǎn)帛文字字體
果你接觸過Mac，或多或少會(huì)被系統(tǒng)的整體感所吸引，統(tǒng)一的UI，流暢的動(dòng)畫，明朗的字體，但是Windows嘛，雖然可能很少人注意，
但邊緣真的糊糊的，也有像素感，甚至有些“殘影”。雖然這和顯示器面板特性、以及分辨率都有很大關(guān)系，畢竟按照蘋果的Retina來，27英寸動(dòng)不動(dòng)就4K、5K了。
▌系統(tǒng)字體和渲染差異
但字體本身也有影響，從Win7的中易宋體，到Vista后的微軟雅黑，設(shè)計(jì)上確實(shí)無(wú)襯線的雅黑更漂亮和諧，一套字體成本甚至高達(dá)200w美刀...
而ClearType功能，則是利用并排3個(gè)彩色子像素勾勒字體輪廓，如果字號(hào)偏小，兩側(cè)就會(huì)有彩色殘影現(xiàn)象，
如同賽博朋克2077里開了“色差”特效，其實(shí)這是代替了傳統(tǒng)的純灰度抗鋸齒，理論上有更好的精度，但實(shí)際肉眼觀感并不好，白底黑字，放完望去，盡是花花綠綠...
在Win10 1703之后，微軟重寫了GDI與字體相關(guān)部分，X和Y軸都支持抗鋸齒，橫線不再粗細(xì)不均、重心偏移、大小不一，但銳化特征依然存在，因?yàn)镃learType的初衷是讓字體清晰銳利，即使改變字形，字符形狀也應(yīng)和像素契合，以防止模糊，提高可讀性，并非圓滑。而中文筆畫多，其實(shí)不適合ClearType渲染。
反觀隔壁蘋果的目標(biāo)是為了還原字體設(shè)計(jì)，哪怕模糊也要保持字形，保持觀感一致。總的用下來，Windows下字體觀感跟mac的Quartz、Linux安卓的FreeType引擎的那種亞像素平滑方案，還是有差距的。
關(guān)了ClearType之后，系統(tǒng)默認(rèn)的部分字體觀感自然了，但其他字體的渲染又會(huì)很迷，模糊、粗細(xì)不均，開不開都有各自的問題...
為了兼容性的傳統(tǒng)Win32環(huán)境下，依然采用ClearType/GDI渲染。而WinRT環(huán)境下的Modern UI則采用了DirectWrite渲染，比方說各種UWP應(yīng)用、瀏覽器。
（被DirectWrite接管后的ClearType抗鋸齒效果其實(shí)很不錯(cuò)，甚至比Mac強(qiáng)）
▌什么是GASP和Hinting
GASP是什么東西呢？全稱Grid-fitting and Scan conversionProcedure Table，直譯過來就是柵格擬合與掃描轉(zhuǎn)換程序表，名字長(zhǎng)的離譜...它把矢量化的字體，光柵化處理，以適應(yīng)不同分辨率、尺寸的屏幕。
主流顯示器分辨率還是1080P，往上還有2K甚至4K，在高分辨率下，我們往往需要在設(shè)置中[更改文本、應(yīng)用等項(xiàng)目大小]，才能得到正常的顯示比例，（這里又得罵一句Win的高分屏適配蛋疼了）
微軟雅黑最佳顯示字號(hào)為14px、12px。按目前微軟雅黑的GASP表中的定義，21px（字體邊長(zhǎng)21像素）是一個(gè)閾值，高于21px的大字，才會(huì)啟動(dòng)平滑渲染，這就導(dǎo)致低分屏的字體，為了銳利就會(huì)“大果粒”，像素鋸齒感比較明顯。
開150%才能得到比較好的觀感，因?yàn)?1px對(duì)應(yīng)的是130%，但系統(tǒng)只有125%的縮放選項(xiàng)，剛好錯(cuò)開，導(dǎo)致渲染效果不佳。
那hinting是什么呢？它是字體內(nèi)置的微調(diào)信息，也就是在分辨率不匹配的時(shí)候怎么做，Win默認(rèn)hinting程度較高，且關(guān)了小字號(hào)AA（抗鋸齒），這正是顯得模糊或者鋸齒感強(qiáng)的原因。
▌更換字體
所以網(wǎng)上有很多玩家暴力替換成改過GASP 表的字體，繞開hinting，直接按原字形（Glyph）渲染。（如：zhuanlan.zhihu.com/p/20194452、i.a632079.me/win10-remove-font-hinting）
但這類方案可能會(huì)有bug或者風(fēng)險(xiǎn)，而且系統(tǒng)更新后可能失效，需要根據(jù)自己系統(tǒng)版本選擇對(duì)應(yīng)的字體包，并非長(zhǎng)久之計(jì)。
我們可以通過noMeiryoUI（github.com/Tatsu-syo/noMeiryoUI/releases），替換系統(tǒng)默認(rèn)字體、字號(hào)，
如果你的使用環(huán)境，簡(jiǎn)繁中日英都會(huì)接觸，可以嘗試等寬的Inziu Iosevka系列字體，觀感會(huì)比較一致。也可以換用insider版本放出的蘭亭黑Pro（微軟雅黑11.3.0）。
瀏覽器可以在設(shè)置里替換字體，比較推薦的是Sarasa Gothic更紗黑體（github.com/be5invis/Sarasa-Gothic/releases）。
最簡(jiǎn)單的字體都有很深的門道，雖然微不足道，依然值得稱道，潛移默化地改善你的使用體驗(yàn)。更暴力、全局的方案，則是使用MacType，這在一些系統(tǒng)美化案例中非常常見，有優(yōu)點(diǎn)，也有缺點(diǎn)，需要取舍，而且需要折騰，關(guān)于它的故事，我們下回再續(xù)~
參考&引用：
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
1、常規(guī)的Web頁(yè)面實(shí)現(xiàn)方法
早期的Web應(yīng)用系統(tǒng)開發(fā)中的Web頁(yè)面內(nèi)的信息定位和Web頁(yè)面布局一般是采用HTML表格<table>標(biāo)簽實(shí)現(xiàn)的，但由于HTML標(biāo)簽本身是將數(shù)據(jù)和顯示風(fēng)格混合在一起的——請(qǐng)見下面的表格標(biāo)簽示例：
<table><tr><td>表格中的某個(gè)單元格需要顯示的數(shù)據(jù)</td></tr></table>
當(dāng)每個(gè)用戶請(qǐng)求訪問后臺(tái)服務(wù)器時(shí)，服務(wù)器端程序都必須要將整個(gè)頁(yè)面文件的全部顯示格式控制的HTML標(biāo)簽內(nèi)容向客戶端的Web瀏覽器發(fā)出。如下示圖為傳統(tǒng)的頁(yè)面設(shè)計(jì)中利用表格定位和布局頁(yè)面內(nèi)容的設(shè)計(jì)效果的示例圖
這種利用<table>標(biāo)簽實(shí)現(xiàn)Web頁(yè)面信息定位和布局的頁(yè)面設(shè)計(jì)方法不便于Web頁(yè)面的維護(hù)修改和功能擴(kuò)展，基于MVC的系統(tǒng)架構(gòu)模式的基本思想要求將頁(yè)面中的數(shù)據(jù)和顯示風(fēng)格兩者相互分離——也就是MVC體系架構(gòu)設(shè)計(jì)模式中所倡導(dǎo)的表示和模型相互分離的設(shè)計(jì)原則。
2、J2EE Web 表示層組件JSP
JSP（Java Server Pages）是由Sun Microsystem公司（現(xiàn)在改為Oracle公司）于1999年6月推出的動(dòng)態(tài)網(wǎng)站實(shí)現(xiàn)技術(shù)，并且是基于Java Servlet以及整個(gè)Java技術(shù)體系的Web開發(fā)技術(shù)。
而且JSP技術(shù)具有簡(jiǎn)便和高性能、服務(wù)器無(wú)關(guān)性和可重用性等技術(shù)實(shí)現(xiàn)方面的特點(diǎn)。但JSP技術(shù)在應(yīng)用方面也暴露出一些不足之處：Web頁(yè)面開發(fā)實(shí)現(xiàn)的人員職責(zé)不清晰、HTML標(biāo)簽與JSP腳本程序混合在一起而導(dǎo)致Web頁(yè)面不便于維護(hù)升級(jí)和功能擴(kuò)展，因?yàn)閃eb頁(yè)面的內(nèi)容（"數(shù)據(jù)"）和表現(xiàn)（"HTML標(biāo)簽"）耦合在一起。
如下示圖為某個(gè)JSP頁(yè)面示例，在該JSP頁(yè)面中包含有服務(wù)器端的Java程序腳本代碼、JSP標(biāo)簽和HTML標(biāo)簽，整個(gè)JSP頁(yè)面內(nèi)容顯得比較"凌亂"，可讀性比較低。
正是由于JSP技術(shù)本身存在有這些方面的問題，能否將面向?qū)ο驤ava編程技術(shù)中所倡導(dǎo)的"封裝"、"隔離"等OOP設(shè)計(jì)思想應(yīng)用于JSP Web頁(yè)面的應(yīng)用開發(fā)中？目前在J2EE應(yīng)用開發(fā)平臺(tái)中出現(xiàn)了許多完善、甚至代替JSP作為表示層的新技術(shù)。
3、采用"CSS+Div"分離J2EE Web表示層組件中的數(shù)據(jù)和表現(xiàn)
（1）"CSS+Div"中的CSS是頁(yè)面層疊樣式表技術(shù)
CSS（Cascading Style Sheet）是Web頁(yè)面層疊樣式表技術(shù)，利用CSS中的各種規(guī)則定義可以統(tǒng)一規(guī)范Web應(yīng)用系統(tǒng)中的整體網(wǎng)頁(yè)的格式，而不再需要分別給每個(gè)Web頁(yè)面中的目標(biāo)標(biāo)簽單獨(dú)進(jìn)行顯示風(fēng)格的屬性設(shè)置。從而大大地減少了對(duì)Web頁(yè)面顯示風(fēng)格的重復(fù)編輯、也提高了Web頁(yè)面功能的可擴(kuò)展性
（2）"CSS+Div"中的Div代表<div>標(biāo)簽
Div其實(shí)也就是HTML超文本標(biāo)簽語(yǔ)言中的<div>標(biāo)簽，<div>標(biāo)簽主要用于構(gòu)建Web頁(yè)面中區(qū)域的定義——簡(jiǎn)單地說，也就是它能夠?qū)eb頁(yè)面劃分為不同的功能區(qū)塊。每個(gè)功能區(qū)塊的顯示風(fēng)格和其中的數(shù)據(jù)本身是相互分離的。
（3）采用"CSS+Div"分離Web表示層頁(yè)面中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯
由于CSS主要是實(shí)現(xiàn)Web頁(yè)面中的數(shù)據(jù)顯示風(fēng)格，而利用<div>標(biāo)簽可以包裝和定位其中的數(shù)據(jù)。因此，"CSS+Div"相互組合在一起就能夠分離Web表示層頁(yè)面文件中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯。
Web應(yīng)用系統(tǒng)的表示層開發(fā)人員首先應(yīng)用<div>標(biāo)簽構(gòu)建好每個(gè)功能區(qū)塊，之后再用CSS樣式單給各個(gè)<div>標(biāo)簽統(tǒng)一配置相應(yīng)的顯示風(fēng)格——<div>標(biāo)簽不僅能夠定位頁(yè)面中的文字內(nèi)容，也能夠包裝圖片（圖片以背景的形式出現(xiàn)）或者其它形式的標(biāo)簽。
<div>標(biāo)簽代表要顯示的Web頁(yè)面數(shù)據(jù)的一個(gè)容器，而CSS層疊樣式表技術(shù)則能夠控制這個(gè)容器的各種顯示元素——比如高度和寬度、邊框的顏色、背景顏色以及其中的文字大小、文字顏色等等這些顯示信息。
"CSS+Div"是目前比較流行的Web頁(yè)面版面布局方式，能夠分離Web表示層頁(yè)面中的數(shù)據(jù)處理邏輯和表現(xiàn)邏輯、并且還能夠減少Web頁(yè)面中HTML標(biāo)簽的數(shù)量、減少網(wǎng)絡(luò)數(shù)據(jù)的傳送量；也更便于Web頁(yè)面的維護(hù)修改和功能擴(kuò)展；而且還可以為同一個(gè)Web頁(yè)面或者一組Web頁(yè)面統(tǒng)一定義一個(gè)CSS層疊樣式表文件或者為不同的功能區(qū)塊定義不同的CSS層疊樣式表文件，并且可以動(dòng)態(tài)切換和應(yīng)用不同的CSS層疊樣式表文件而產(chǎn)生出Web頁(yè)面"換皮膚"的應(yīng)用效果。
4、為什么要應(yīng)用"CSS+Div"構(gòu)建Web應(yīng)用系統(tǒng)表示層組件
（1）減少Web頁(yè)面中的重復(fù)HTML標(biāo)簽和提高Web頁(yè)面的響應(yīng)性能
由于采用CSS層疊樣式表技術(shù)能夠全局定義各個(gè)不同Web頁(yè)面的顯示風(fēng)格，從而避免了在每個(gè)Web頁(yè)面中都內(nèi)嵌有這些顯示風(fēng)格的控制標(biāo)簽，這樣的Web頁(yè)面設(shè)計(jì)方法能夠大大地減少Web頁(yè)面中的重復(fù)標(biāo)簽的數(shù)量和提高Web頁(yè)面的響應(yīng)性能。
另外，CSS層疊樣式表技術(shù)的兼容性也比較高——目前各個(gè)不同廠商的瀏覽器也都支持CSS層疊樣式表技術(shù)。一個(gè)采用"CSS+Div"技術(shù)實(shí)現(xiàn)的Web頁(yè)面布局可以在不同的Web瀏覽器、不同的網(wǎng)絡(luò)設(shè)備上都能夠正常地顯示。因此，它也方便了基于"CSS+Div"構(gòu)建的Web應(yīng)用系統(tǒng)的可擴(kuò)展性和可移植性——Web頁(yè)面中需要顯示的數(shù)據(jù)及其它形式的內(nèi)容與顯示設(shè)備無(wú)關(guān)。
（2）分離Web頁(yè)面的表現(xiàn)邏輯與數(shù)據(jù)結(jié)構(gòu)定義
在實(shí)際企業(yè)應(yīng)用系統(tǒng)的Web頁(yè)面開發(fā)中，一般再配合采用JavaScript腳本語(yǔ)言進(jìn)行行為控制——也就是采用"CSS+Div+JavaScript"三種技術(shù)相互結(jié)合進(jìn)行Web頁(yè)面開發(fā)，其中的CSS層疊樣式表技術(shù)實(shí)現(xiàn)Web頁(yè)面風(fēng)格的顯示、Div（<div>標(biāo)簽）則實(shí)現(xiàn)其中數(shù)據(jù)的包裝和定位、而JavaScript腳本程序代碼則實(shí)現(xiàn)與用戶相互交互的事件等行為的控制。
因此，采用"CSS+Div+JavaScript"三種技術(shù)相互配合進(jìn)行Web頁(yè)面開發(fā)，基本上能夠達(dá)到模型視圖控制器（MVC）體系架構(gòu)設(shè)計(jì)模式所倡導(dǎo)的"結(jié)構(gòu)"、"表現(xiàn)"、"行為"三者相互分離的效果。
如果應(yīng)用該技術(shù)，首先，將能夠使得Web頁(yè)面中的各個(gè)部分的耦合性更小、更易于維護(hù)和擴(kuò)展。比如，如果希望調(diào)整Web頁(yè)面的顯示風(fēng)格，設(shè)計(jì)和開發(fā)實(shí)現(xiàn)人員只需要改變相關(guān)的CSS層疊樣式表文件中有關(guān)的樣式表定義，而Web頁(yè)面文件本身并不需要被動(dòng)地修改；其次，Web頁(yè)面的結(jié)構(gòu)清晰，設(shè)計(jì)和開發(fā)實(shí)現(xiàn)相關(guān)的人員分工也非常明確。
5、在銀行賬戶信息管理系統(tǒng)頁(yè)面開發(fā)中應(yīng)用CSS+Div+JavaScript技術(shù)
在示例項(xiàng)目銀行賬戶信息管理系統(tǒng)Web頁(yè)面開發(fā)中，作者應(yīng)用了"CSS+Div+JavaScript"三種技術(shù)，不僅減少了每個(gè)Web頁(yè)面中的標(biāo)簽總量，也將Web頁(yè)面中的格式、內(nèi)容和行為三者相互分離。
另外，在銀行賬戶信息管理系統(tǒng)中還應(yīng)用了Tiles模板技術(shù)將整個(gè)Web頁(yè)面分為不同的版塊（Tiles），而每個(gè)版塊中的Web頁(yè)面文件又采用"CSS+Div+JavaScript"技術(shù)實(shí)現(xiàn)，最終使得整個(gè)Web應(yīng)用系統(tǒng)中的每個(gè)Web頁(yè)面內(nèi)的HTML標(biāo)簽數(shù)量都比較少，而且可重用度也都比較高。
下面的代碼示例中的Web頁(yè)面內(nèi)容為示例項(xiàng)目銀行賬戶信息管理系統(tǒng)中版權(quán)信息頁(yè)面內(nèi)容的示例，其中的JavaScript腳本程序?qū)崿F(xiàn)Web頁(yè)面內(nèi)容的防拷貝控制、而Web頁(yè)面的顯示風(fēng)格定義由style.css樣式表文件定義——請(qǐng)見黑體標(biāo)識(shí)的部分代碼——應(yīng)用CSS+Div+JavaScript技術(shù)實(shí)現(xiàn)版權(quán)信息頁(yè)面內(nèi)容的示例
<%@ 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>藍(lán)夢(mèng)網(wǎng)上銀行系統(tǒng)版權(quán)信息顯示頁(yè)</title>
</head>
<body>
<script type="text/javascript">
document.body.oncopy=function (){
setTimeout( function () {
var text=clipboardData.getData("text");
if (text) {
text=text + "\r\n所復(fù)制的內(nèi)容來源于"藍(lán)夢(mèng)網(wǎng)上銀行系統(tǒng)"
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">返回首頁(yè)</a> -
<a href="#" class="hrefstyle">關(guān)于本站</a> -
<a href="#" class="hrefstyle">網(wǎng)站幫助</a> -
<a href="#" class="hrefstyle">網(wǎng)站聲明</a> -
<a href="#" class="hrefstyle">服務(wù)網(wǎng)點(diǎn)</a> -
<a href="#" class="hrefstyle">服務(wù)熱線</a> -
<a href="#" class="hrefstyle">廣告合作</a> -
<a href="#" class="hrefstyle">下載聲明</a> -
<a href="#" class="hrefstyle">友情連接</a> -
<a href="#" class="hrefstyle">網(wǎng)站地圖</a> -
<a href="#" class="hrefstyle">聯(lián)系我們</a>
</div>
</body>
</html>為了減少本書的篇幅，在上面的代碼示例中省略了各個(gè)超鏈接中的目標(biāo)URL地址的顯示。該頁(yè)面在Macromedia Dreamweaver工具軟件中的預(yù)覽效果請(qǐng)見下圖示例圖所示。
6、應(yīng)用支持"CSS+Div"的可視化軟件工具提高頁(yè)面開發(fā)的效率
（1）CSS Tab Designer是一款使用CSS設(shè)計(jì)導(dǎo)航菜單的可視化軟件
由于在"CSS Tab Designer"可視化軟件中內(nèi)置有高達(dá)60多種不同風(fēng)格的樣式，Web頁(yè)面開發(fā)人員只需修改現(xiàn)成樣式的模版文件，就能快速地生成滿足自己的Web應(yīng)用系統(tǒng)需要的CSS菜單。如下示圖為"CSS Tab Designer"官方網(wǎng)站對(duì)該軟件的功能特性的介紹文字的局部截圖，讀者可以在此網(wǎng)站中下載該軟件，為開源共享軟件。
并且該軟件生成的XHTML標(biāo)簽嚴(yán)格遵循W3C網(wǎng)頁(yè)標(biāo)準(zhǔn)，所創(chuàng)建出的CSS菜單也能夠兼容于各種主流的瀏覽器（如Internet Explorer、Firefox、Opera、Netscape等）。
讀者在成功下載該開源軟件后，在CSS Tab Designer的系統(tǒng)文件及目錄結(jié)構(gòu)中的tab.exe文件為它的啟動(dòng)程序。而在Help目錄中的文件為操作幫助指南，samples目錄內(nèi)的文件為示例樣式文件，styles目錄內(nèi)的文件為CSS Tab Designer內(nèi)帶的各個(gè)樣式模板文件。
（2）啟動(dòng)CSS Tab Designe導(dǎo)航菜單可視化軟件
讀者點(diǎn)擊所下載的CSS Tab Designe文件目錄中的tab.exe文件就可以啟動(dòng)CSS Tab Designe導(dǎo)航菜單可視化軟件，下圖所示為啟動(dòng)后的初始界面的截圖。其中在左面【項(xiàng)目】視圖中顯示所創(chuàng)建的各個(gè)頁(yè)面文件；而在中間的【標(biāo)簽樣式表】視圖中提供有CSS Tab Designe可視化軟件內(nèi)帶的各個(gè)模板樣式，開發(fā)人員可以直接選擇；在右面的【預(yù)覽】視圖中直接顯示開發(fā)人員所設(shè)計(jì)的結(jié)果、并能夠采用"所見即所得"方式進(jìn)行開發(fā)實(shí)現(xiàn)。
（3）瀏覽CSS Tab Designe導(dǎo)航菜單可視化軟件的操作幫助指南
在CSS Tab Designe導(dǎo)航菜單可視化軟件提供有操作幫助指南，并且文檔的技術(shù)說明內(nèi)容寫的也比較詳細(xì)和易懂——請(qǐng)見下圖所示的幫助文檔的局部?jī)?nèi)容的截圖。讀者可以瀏覽和閱讀CSS Tab Designe導(dǎo)航菜單可視化軟件的幫助文檔掌握對(duì)該軟件的使用，以提高應(yīng)用CSS+Div技術(shù)進(jìn)行頁(yè)面設(shè)計(jì)時(shí)的效率。
如何應(yīng)用策略設(shè)計(jì)模式的思想設(shè)計(jì)通用的數(shù)據(jù)庫(kù)連接類
如何應(yīng)用策略設(shè)計(jì)模式分離JDBC數(shù)據(jù)庫(kù)連接中的外部環(huán)境信息
如何應(yīng)用GOF設(shè)計(jì)模式中的構(gòu)建者模式創(chuàng)建復(fù)合對(duì)象實(shí)例
如何應(yīng)用GOF設(shè)計(jì)模式中的創(chuàng)建型模式實(shí)現(xiàn)松耦合地創(chuàng)建對(duì)象實(shí)例
如何應(yīng)用觀察者設(shè)計(jì)模式重構(gòu)系統(tǒng)中日志處理功能實(shí)現(xiàn)的程序代碼
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
