web端使用字型的實用版font family

2022-09-16 13:12:13 字數 1429 閱讀 1881

a.預設中文字型是 heiti sc

b.預設英文本型是 helvetica

c.預設數字字型是 helveticaneu

a.預設中文字型是droidsansfallback

b.預設英文和數字字型是droid sans

a.預設中文字型是dengxian(方正等線體)

b.預設英文和數字字型是segoe

各個手機系統有自己的預設字型,且都不支援微軟雅黑

如無特殊需求,手機端無需定義中文字型,使用系統預設

英文本型和數字字型可使用 helvetica ,三種系統都支援

相容性

因為不同瀏覽器相容性問題,對字型格式的支援也各有不同,下面來了解一下各個版本瀏覽器支援什麼字型。

turetpe(.ttf)格式:

.ttf字型是windows和mac的最常見的字型,是一種raw格式,因此他不為**優化,支援這種字型的瀏覽器有【ie9+,firefox3.5+,chrome4+,safari3+,opera10+,ios mobile safari4.2+】;

opentype(.otf)格式:

.otf字型被認為是一種原始的字型格式,其內建在turetype的基礎上,所以也提供了更多的功能,支援這種字型的瀏覽器有【firefox3.5+,chrome4.0+,safari3.1+,opera10.0+,ios mobile safari4.2+】;

web open font format(.woff)格式:

.woff字型是web字型中最佳格式,他是乙個開放的truetype/opentype的壓縮版本,同時也支援元資料報的分離,支援這種字型的瀏覽器有【ie9+,firefox3.5+,chrome6+,safari3.6+,opera11.1+】;

embedded open type(.eot)格式:

.eot字型是ie專用字型,可以從truetype建立此格式字型,支援這種字型的瀏覽器有【ie4+】;

svg(.svg)格式:

.svg字型是基於svg字型渲染的一種格式,支援這種字型的瀏覽器有【chrome4+,safari3.1+,opera10.0+,ios mobile safari3.2+】。

這就意味著在@font-face中我們至少需要.woff,.eot兩種格式字型,甚至還需要.svg等字型達到更多種瀏覽版本的支援。

2.用法

@font-face
3.獲取@font-face所需字型格式的工具

a.fontsquirrel 

4.優化工具

a.字蛛(fontspider)

移動端web頁面使用字型分析

一直不知道手機端用的什麼字型,只是覺得類似雅黑,直到有一次設計師問到設計移動web頁面該用什麼字型才嚴肅地想起這個問題。前人已栽樹,後人我就直接轉來吧 回想2年前剛開始接觸手機專案,接到psd稿後,發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計,於是我寫頁面的時候也定義 font family ...

移動web頁面使用字型的思考

回想2年前剛開始接觸手機專案,接到psd稿後,發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計,於是我寫頁面的時候也定義 font family 為微軟雅黑,後來發到線上後,細心的產品經理發現頁面的字型不是微軟雅黑,要求馬上修改,我就驚呆了,還跟產品爭執一番。後來了解到的手機系統 ios andr...

原 移動web頁面使用字型的思考

回想2年前剛開始接觸手機專案,接到psd稿後,發現視覺設計師們喜歡用微軟雅黑作為中文字型進行設計,於是我寫頁面的時候也定義 font family 為微軟雅黑,後來發到線上後,細心的產品經理發現頁面的字型不是微軟雅黑,要求馬上修改,我就驚呆了,還跟產品爭執一番。後來了解到的手機系統 ios andr...