時(shí)間:2017-06-25 15:04:41 來源:IT貓撲網(wǎng) 作者:網(wǎng)管聯(lián)盟 我要評(píng)論(0)
在Web編碼中,CSS默認(rèn)應(yīng)用的Web字體是有限的,雖然在新版本的CSS3,我們可以通過新增的@font-face屬性來引入特殊的瀏覽器加載字體。
但多數(shù)情況下,考慮各個(gè)因素的影響我們還是在盡量充分利用這些默認(rèn)調(diào)用的字體實(shí)現(xiàn)CSS的編寫,這里整理了19個(gè)Web安全字體,讓你無(wú)需任何顧慮的情況下暢快使用。
1,? Arial
? ?
微軟公司的網(wǎng)頁(yè)核心字體之一,最常用的sans serif字體,當(dāng)字號(hào)很小時(shí)不容易閱讀。但是,大寫的"I"和小寫的"l"是無(wú)法區(qū)別的,你可以考慮用Tahoma字體來替代。
(蘋果系統(tǒng)沒有這種字體,但有一種對(duì)應(yīng)于Arial的字體叫Helvetica,它是MAC機(jī)上與Arial 字體最相似的WEB字體,是別一種非襯線字體.它是一種性能優(yōu)良的打印字體,但在屏幕上表現(xiàn)不是很好,說道Helvetica字體,昨天發(fā)現(xiàn)了很多有意思的站點(diǎn),主要是紀(jì)念Helvetica字體誕生50年而設(shè)的。)
? ?
CSS寫法:font-family: Arial, Helvetica, sans-serif;
2, Arial Black
? ? CSS寫法:font-family: ‘Arial Black’, Gadget, sans-serif;
3, Arial Narrow
? ? CSS寫法:font-family: ‘Arial Narrow’, sans-serif;
4, Verdana
? ? 微軟公司的網(wǎng)頁(yè)核心字體之一,微軟公司專門為屏幕顯示而開發(fā)的。應(yīng)用廣泛。易于閱讀。是顯示器中最清晰的字體,即使字號(hào)很小,也很容易閱讀。半肥貓比較喜歡采用10PX的Verdana來做英文正文字體,也推薦大家使用,但字號(hào)最好介于10~14像素之間,超出這個(gè)范圍就不好看了。
? ?
CSS寫法:font-family: Verdana, Geneva, sans-serif;
5,? Georgia
微軟公司的網(wǎng)頁(yè)核心字體之一,可用性好。可讀性比Times New Roman強(qiáng)。是網(wǎng)站設(shè)計(jì)中,瀏覽效果最好的serif字體,因?yàn)樗菍榫W(wǎng)上閱讀設(shè)計(jì)的。)
? ?
CSS寫法:font-family: Georgia, serif;
6,? Times New Roman
微軟公司的網(wǎng)頁(yè)核心字體之一,可能是最常用的serif字體,是網(wǎng)站瀏覽器默認(rèn)的字體,12pt以上的字體容易閱讀,但小字號(hào)的字體易讀性差。(蘋果系統(tǒng)沒有這個(gè)字體,有一個(gè)對(duì)應(yīng)于Times New Roman的字體叫Times)
? ?
CSS寫法:font-family: 'Times New Roman', Times, serif;
7, Trebuchet MS
微軟公司的網(wǎng)頁(yè)核心字體之一,與Arial相似,半肥貓覺得:Trebuchet MS比Arial看起來優(yōu)雅、古典一點(diǎn)??梢杂脕碜鰳?biāo)題,但小字號(hào)閱讀起來會(huì)很困難(低于13PIX閱讀起來就很累了,不太推薦用來做正文字體)。在蘋果系統(tǒng)上也可以用Helvetica做替代。
? ?
CSS寫法:font-family: 'Trebuchet MS', Helvetica, sans-serif;
8 , Courier New
微軟公司的網(wǎng)頁(yè)核心字體之一,老式打印機(jī)字體,有一種獨(dú)特的機(jī)械工整感覺。呈現(xiàn)計(jì)算機(jī)編碼時(shí),還會(huì)用到這種字體。12 pt的Courier New字體曾是美國(guó)國(guó)務(wù)院的公文標(biāo)準(zhǔn)字體,但于2004年1月停用,改使用14 pt的Times New Roman,因?yàn)槠渚?現(xiàn)代性"和"易讀性"。
? ?
CSS寫法:font-family: 'Courier New', Courier, monospace;
9,? Impact
微軟公司的網(wǎng)頁(yè)核心字體之一,Impact是1965年發(fā)表的一個(gè)無(wú)襯線字體,其特粗的筆畫、緊縮的間距。半肥貓覺得:字體較為粗獷,適合使用在標(biāo)題上,而不常用在內(nèi)文。
? ?
CSS寫法:font-family: Impact, Charcoal, sans-serif;
10,? Comic Sans MS
微軟公司的網(wǎng)頁(yè)核心字體之一,手寫體。這是一種爭(zhēng)議很大的字體,講實(shí)話,半肥貓也不喜歡這個(gè)字體,一點(diǎn)美感都沒有,不過在一大堆規(guī)規(guī)矩矩的字體里面,有這么一個(gè)隨意性比較的字體,可以變換一下口味,也算不錯(cuò)吧,建議不要用在正規(guī)的金融、政府、商業(yè)機(jī)構(gòu)站點(diǎn)。
? ?
CSS寫法:font-family: 'Comic Sans MS', cursive;
11,? Tahoma
Tahoma是一個(gè)十分常見的無(wú)襯線字體,Tahoma和Verdana師出同為名設(shè)計(jì)師馬修·卡特的作品,由微軟在1999年推出,被采用為Windows 2000、Windows XP、Windows Server 2003等系統(tǒng)的默認(rèn)字型。半肥貓覺得:它的字體結(jié)構(gòu)和Verdana很相似,其字符間距較小,用來作為標(biāo)題,效果好過Arial(Tahoma的大寫I 和小寫l比Arial容易識(shí)別),但如果作為正文,他的字號(hào)不能小于13PIX,否則很多筆畫粘連到一起,不利于閱讀。
? ?
CSS寫法:font-family: Tahoma, Geneva, sans-serif;
12,? Courier
Courier是一個(gè)等寬字體的粗襯線字體,主要是依據(jù)打字機(jī)所打印出來的字型來設(shè)計(jì)。原來Courier New的字體是IBM公司在1950年代設(shè)計(jì)給打印機(jī)使用的字體,后來這個(gè)字型成為整個(gè)打字機(jī)制造業(yè)的標(biāo)準(zhǔn)。Courier New是Courier的變體,比Courier更具機(jī)械味道。
? ?
CSS寫法:font-family: Courier, monospace;
13,? Lucida Sans Unicode
是一種OpenType型的無(wú)襯線字體 。1993年制作并隨微軟公司的Windows NT 3.1操作系統(tǒng)發(fā)布。有較大的x字高,具有很好的可讀性,被廣泛用于顯示、出版等各種用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希臘字母,西里爾字母,
關(guān)鍵詞標(biāo)簽:網(wǎng)頁(yè)設(shè)計(jì),Web字體,字體
相關(guān)閱讀 網(wǎng)頁(yè)設(shè)計(jì)常用Javascript經(jīng)典代碼 十大好用的看漫畫神器推薦2022-看漫畫的軟件排行榜前十名 網(wǎng)頁(yè)設(shè)計(jì)中的各種分辨率下的標(biāo)準(zhǔn)尺寸 5日精通CSS層疊樣式表之第二天 CSS教程:網(wǎng)頁(yè)字體及字體大小的設(shè)計(jì) 引用Red Hat Linux 9中文字體美化
熱門文章 網(wǎng)頁(yè)制作與CSS的UTF-8和GB2312編碼問題 網(wǎng)頁(yè)設(shè)計(jì)中常用的19個(gè)Web安全字體 關(guān)于iframe內(nèi)頁(yè)高度自適應(yīng) 良好用戶體驗(yàn)應(yīng)避開15種情況
時(shí)間:2020-10-20 16:11:14
時(shí)間:2020-05-06 10:38:00
時(shí)間:2019-05-06 16:12:18
時(shí)間:2019-01-26 14:19:38
時(shí)間:2017-11-04 12:38:06
時(shí)間:2017-05-25 09:39:06
人氣排行 log4j之配置文件加載過程分析-properties文件和xml文件 提高網(wǎng)頁(yè)打開速度的一些小技巧 網(wǎng)頁(yè)制作與CSS的UTF-8和GB2312編碼問題 關(guān)于iframe內(nèi)頁(yè)高度自適應(yīng) 網(wǎng)頁(yè)設(shè)計(jì)中常用的19個(gè)Web安全字體 網(wǎng)頁(yè)設(shè)計(jì)中的各種分辨率下的標(biāo)準(zhǔn)尺寸 網(wǎng)頁(yè)設(shè)計(jì)常用Javascript經(jīng)典代碼 手把手教你制作Google Sitemap