網頁設計中常用的19個Web安全字體

來自http://www.jb51.net

?

在Web編碼中,CSS默認應用的Web字體是有限的,雖然在新版本的CSS3,我們可以通過新增的@font-face屬性來引入特殊的瀏覽器加載字體。但多數情況下,考慮各個因素的影響我們還是在盡量充分利用這些默認調用的字體實現CSS的編寫,這里整理了19個Web安全字體,讓你無需任何顧慮的情況下暢快使用。

1,? Arial

微軟公司的網頁核心字體之一,最常用的sans serif字體,當字號很小時不容易閱讀。但是,大寫的“I”和小寫的“l”是無法區別的,你可以考慮用Tahoma字體來替代。
(蘋 果系統沒有這種字體,但有一種對應于Arial的字體叫Helvetica,它是MAC機上與Arial 字體最相似的WEB字體,是別一種非襯線字體.它是一種性能優良的打印字體,但在屏幕上表現不是很好,說道Helvetica字體,昨天發現了很多有意思 的站點,主要是紀念Helvetica字體誕生50年而設的。)

Arial

CSS寫法:font-family: Arial, Helvetica, sans-serif;

2, Arial Black

ArialBlack

CSS寫法:font-family: ‘Arial Black’, Gadget, sans-serif;

3, Arial Narrow

ArialNarrow

CSS寫法:font-family: ‘Arial Narrow’, sans-serif;

4, Verdana

微軟公司的網頁核心字體之一,微軟公司專門為屏幕顯示而開發的。應用廣泛。易于閱讀。是顯示器中最清晰的字體,即使字號很小,也很容易閱讀。半肥貓 比較喜歡采用10PX的Verdana來做英文正文字體,也推薦大家使用,但字號最好介于10~14像素之間,超出這個范圍就不好看了。

Verdana

CSS寫法:font-family: Verdana, Geneva, sans-serif;

5,? Georgia
微軟公司的網頁核心字體之一,可用性好。可讀性比Times New Roman強。是網站設計中,瀏覽效果最好的serif字體,因為它是專為網上閱讀設計的。)

Georgia

CSS寫法:font-family: Georgia, serif;

6,? Times New Roman
微軟公司的網頁核心字體之一,可能是最常用的serif字體,是網站瀏覽器默認的字體,12pt以上的字體容易閱讀,但小字號的字體易讀性差。(蘋果系統沒有這個字體,有一個對應于Times New Roman的字體叫Times)

Times New Roman

CSS寫法:font-family: 'Times New Roman', Times, serif;

7, Trebuchet MS
微軟公司的網頁核心字體之一,與Arial相似,半肥貓覺 得:Trebuchet MS比Arial看起來優雅、古典一點。可以用來做標題,但小字號閱讀起來會很困難(低于13PIX閱讀起來就很累了,不太推薦用來做正文字體)。在蘋果 系統上也可以用Helvetica做替代。

Trebuchet MS

CSS寫法:font-family: 'Trebuchet MS', Helvetica, sans-serif;

8 , Courier New
微軟公司的網頁核心字體之一,老式打印機字體,有一種獨特的機械工整感 覺。呈現計算機編碼時,還會用到這種字體。12 pt的Courier New字體曾是美國國務院的公文標準字體,但于2004年1月停用,改使用14 pt的Times New Roman,因為其具“現代性”和“易讀性”。

Courier New

CSS寫法:font-family: 'Courier New', Courier, monospace;

9,? Impact
微軟公司的網頁核心字體之一,Impact是1965年發表的一個無襯線字體,其特粗的筆畫、緊縮的間距。半肥貓覺得:字體較為粗獷,適合使用在標題上,而不常用在內文。

Impact

CSS寫法:font-family: Impact, Charcoal, sans-serif;

10,? Comic Sans MS
微軟公司的網頁核心字體之一,手寫體。這是一種爭議很大的字體,講實話,半肥貓也不喜歡這個字體,一點美感都沒有,不過在一大堆規規矩矩的字體里面,有這么一個隨意性比較的字體,可以變換一下口味,也算不錯吧,建議不要用在正規的金融、政府、商業機構站點。

Comic Sans MS

CSS寫法:font-family: 'Comic Sans MS', cursive;

11,? Tahoma
Tahoma是一個十分常見的無襯線字體,Tahoma和Verdana師出同 為名設計師馬修·卡特的作品,由微軟在1999年推出,被采用為Windows 2000、Windows XP、Windows Server 2003等系統的默認字型。半肥貓覺得:它的字體結構和Verdana很相似,其字符間距較小,用來作為標題,效果好過Arial(Tahoma的大寫I 和小寫l比Arial容易識別),但如果作為正文,他的字號不能小于13PIX,否則很多筆畫粘連到一起,不利于閱讀。

Tahoma

CSS寫法:font-family: Tahoma, Geneva, sans-serif;

12,? Courier
Courier是一個等寬字體的粗襯線字體,主要是依據打字機所打印出來的字 型來設計。原來Courier New的字體是IBM公司在1950年代設計給打印機使用的字體,后來這個字型成為整個打字機制造業的標準。Courier New是Courier的變體,比Courier更具機械味道。

Courier New

CSS寫法:font-family: Courier, monospace;

13,? Lucida Sans Unicode
是一種OpenType型的無襯線字體 。1993年制作并隨微軟公司的Windows NT 3.1操作系統發布。有較大的x字高,具有很好的可讀性,被廣泛用于顯示、出版等各種用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希臘字母,西里爾字母,希伯來字母,以及國際音標字符。該字體是首個 Unicode代碼的字體, 該字體從Windows 98開始一直作為系統預裝字體發行。
后來發布的 Lucida Grande字體作為蘋果公司Mac OS X系統的默認字體發布。
CSS寫法:font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console
同Lucida Sans Unicode類似。

Lucida Console

CSS寫法:font-family: 'Lucida Console', Monaco, monospace;

15,? Garamond
Garamond(加拉蒙德)是一類西文襯線字體的總稱,自16世紀40年 代開始至今,有很多家公司和很多設計師參與到Garamond字體設計,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond等等。半肥貓覺得:字體給人端莊典雅,有些古典的感覺,在博物館和歷史性悠久的項目中使用,應該可以獲得不錯的效果。

Garamond

CSS寫法:font-family: Garamond, serif;

16 ,? MS Sans Serif
微軟系統自帶字體。屏幕顯示的像素字體。非襯線字體。

MS Sans Serif

CSS寫法:font-family: 'MS Sans Serif', Geneva, sans-serif;
17 ,? MS Serif
微軟系統自帶字體。屏幕顯示的像素字體。襯線字體。
CSS寫法:font-family: 'MS Serif', 'New York', sans-serif;

18, Palatino Linotype

Palatino Linotype

CSS寫法:font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

Symbol

CSS寫法:font-family: Symbol, sans-serif;

20, Bookman Old Style

Bookman Old Style

CSS寫法:font-family: 'Bookman Old Style', serif;

本文參考了WEB安全字體,希望在Web編寫過程中這些核心的Web字體能對你有用。

轉載于:https://www.cnblogs.com/seesky/p/3727592.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/258594.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/258594.shtml
英文地址,請注明出處:http://en.pswp.cn/news/258594.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

python slice是共享內存嗎_python共享內存實現進程通信

1.概述共享內存可以說是最有用的進程間通信方式.兩個不同的進程共享內存的意思是:同一塊物理內存被映射到兩個進程的各自的進程地址空間.一個進程可以及時看到另一個進程對共享內存的更新,反之亦然.采用共享內存通信的一個顯而易見的好處效率高,因為進程可以直接讀寫內存,而不需…

FCN-數據篇

從本篇開始,我們來記錄一下全卷積網絡用來做語義分割的全過程。 代碼:https://github.com/shelhamer/fcn.berkeleyvision.org 下面我們將描述三方面的內容: 1. 官方提供的公開數據集 2. 自己的數據集如何準備,主要是如何標注…

深圳本地網店代運營公司

◆★◆深圳本地網店代運營,淘寶代運營多少錢,微博運營公司,代運營平臺,天貓京東代運營,網站代運營圖 片, 北京京東代運營,網店代運營協議,京東店鋪代運營,網站代運營服務…

搜索專題題解

題目鏈接: codeforces 277A - Learning Languages 題目描述: 一個團體有n個人,每個人都掌握了一些語言,每個人學一門語言有1個花費,兩個人之間可以通過其他人的翻譯,問最少花費多少使得這個團體的任意兩個人…

Facebook 開源的快速文本分類器 FastTex

FastText是Facebook開發的一款快速文本分類器,提供簡單而高效的文本分類和表征學習的方法,性能比肩深度學習而且速度更快。 fastText 原理fastText 方法包含三部分:模型架構、層次 Softmax 和 N-gram 特征。下面我們一一介紹。 1.1 模型架構 …

FCN-加載訓練與測試數據

當我們生成了數據后,我們來看看FCN是如何加載數據的。 FCN 代碼預覽 其中: - data : 訓練測試數據 - ilsvrc-nets:存放預訓練的模型 - 剩下的框:不同數據集的訓練測試prototxt - voc_layers,siftflow_layers等&am…

怎么撤銷定時說說_已注冊商標遇到撤三申請怎么辦

很多企業的商標都遇到過商標撤三的情況,撤三簡單的說就是,注冊商標沒有正當理由連續三年不使用的,任何單位或者個人可以向商標局申請撤銷該注冊商標。所以說,無論您的企業多大,商標持有的再多,也要做好商標…

windows下架設SVN服務器并設置開機啟動

1、安裝SVN服務器,到http://subversion.apache.org/packages.html上下載windows版的SVN,并安裝,在命令行下運行svn命令,如下所以,則svn服務器安裝成功。 C:\Documents and Settings\Administrator>svn 使用“svn …

Spartan-6 FPGA SelectIO Resources User Guide 筆記2 SelectIO Attributes/Constraints

1.Location Constraint 用于分配I/O端口 NET <I/O_NAME> LOC "<EXTERNAL_PORT_IDENTIFIER>"; Example: NET MY_IO LOCR7; 2.IOSTANDARD Attribute 用于選擇IO標準如LVCMOS25&#xff0c;LVDS_25等 NET <I/O_NAME> IOSTANDARD”<IOSTANDARD V…

python合并pdf 加書簽_Python生成pdf目錄書簽的實例方法

有時候我們用的一些pdf資料是沒有目錄的&#xff0c;這樣找尋我們想到的東西比較麻煩。本篇文章就為大家帶來python來生成pdf目錄書簽的方法。首先&#xff0c;我們需要下載一個軟件FreePic2Pdf,利用它我們可以將我們的pdf文件導入書簽工具下載&#xff1a;https://www.jb51.ne…

正則表達式及其在python上的應用

今天學習了一早上正則表達式。如下內容部分轉載自《讀懂正則表達式就這么簡單》 一、什么是正則表達式 正則表達式是一種特殊的字符串模式&#xff0c;用于匹配一組字符串&#xff0c;就好比用模具做產品&#xff0c;而正則就是這個模具&#xff0c;定義一種規則去匹配符合規…

安全專家在硬盤固件中發現NSA的網絡間諜程序

本周安全專家在硬盤固件中發現了美國國家安全局&#xff08;NSA&#xff09;的網絡間諜程序&#xff0c;這些程序非常難以被檢測或者刪除。來自卡巴斯基的研究者公布了該惡意程序用來“Phone Home”的URL地址&#xff0c;NSA利用這些隨機、凌亂的地址來收集硬盤上的敏感數據。 …

SVN 分支/合并/切換

本文無條理性&#xff0c;僅作自我參考。 花費了兩個半下午&#xff0c;走馬觀花的看了一下說明文檔&#xff0c;SVN設計的太復雜&#xff0c;對我這樣的&#xff0c;不在一個集體的的業余開發者&#xff0c;要理解起來真是太難了。。。。 分支 Make branches as often as yo…

使用Firefox或Chrome的雇員表現更好不頻繁跳槽

一家銷售軟件幫助雇主招募雇員和留住雇員的公司Cornerstone OnDemand稱&#xff0c;使用非默認瀏覽器如Firefox或Chrome的雇員表現更好不頻繁跳槽。 這項研究旨在幫助那些跳槽率過高的行業&#xff0c;比如呼叫中心的年跳槽率高達45%。對50000名在線工作評估參與者的數據進行分…

關于FCN的數據集著色說明

前方我們講解了《 FCN-數據篇》。里面包含了如何制作類似pascal voc的label。很大篇幅在談如何著色&#xff0c;如何轉化為索引圖像。 由于一些內容參考網上的資料&#xff0c;所以對里面的一些操作含義也有些糊涂。 其實網上的東西也不都對&#xff0c;很多人云亦云。所以需要…

mongobd python_Python操作MongoDB數據庫PyMongo庫使用方法

引用PyMongo復制代碼 代碼如下:>>> import pymongo創建連接Connection復制代碼 代碼如下:>>> import pymongo>>> conn pymongo.Connection(localhost,27017)或復制代碼 代碼如下:>>> from pymongo import Connection>>> conn C…

Android Property Animation動畫

3.0以前&#xff0c;android支持兩種動畫模式&#xff0c;tween animation,frame animation&#xff0c;在android3.0中又引入了一個新的動畫系統&#xff1a;property animation&#xff0c;這三種動畫模式在SDK中被稱為property animation,view animation,drawable animation…

angular實現select的ng-options

ng實現簡單的select <div ng-controller"ngSelect"><select ng-model"vm.selectVal" ng-options"o.title for o in vm.optionsData"><option value"">請選擇</option></select> </div> var app …

Ubuntu14.04下Mongodb數據庫可視化工具安裝部署步驟(圖文詳解)(博主推薦)

不多說&#xff0c;直接上干貨&#xff01; 前期博客 Ubuntu14.04下Mongodb&#xff08;離線安裝方式|非apt-get&#xff09;安裝部署步驟&#xff08;圖文詳解&#xff09;&#xff08;博主推薦&#xff09; Ubuntu14.04下Mongodb官網安裝部署步驟&#xff08;圖文詳解&#x…

deeplab運行指南

以下僅僅為一個總結&#xff0c;參考了網上的眾多資料&#xff0c;僅備忘記。 主要鏈接 deeplab主頁&#xff1a;http://liangchiehchen.com/projects/DeepLab.html官方代碼&#xff1a;https://bitbucket.org/aquariusjay/deeplab-public-ver2python 版caffe實現&#xff1a…