马牌官网

2019-11-02網站百科2630
  • 詳情內容
  • 留言點評

作為網頁設計師,我們希望用精美的字體來幫助我們為網頁排版,好的排版是組成優秀網頁設計的重要組成部分,字體在網頁設計中扮演了相對重要的一個角色,所以在網站中,選用什麼樣的字體也是一個相對比較重要的工作。而網頁使用的字體缺受制于操作系統,也就是說在一般情況下網頁能呈現什麼的字體取決于用戶的操作系統有沒有安裝某個字體,若未預裝即使被樣式指定,網頁也會退而求其次的啟用系統自帶的其它字體。這也是我們在不同電腦、不同手機上同一網頁中看到不同字體的原因。

基于操作系統WEB可直接引用的字體就叫做網頁安全字體,有關英文安全字體可以參閱本站《網頁前端設計常用Web安全字體》,中文則可以參閱《CSS常用中文字體名轉Unicode編碼對照表》。

使用安全字體外的個性化網頁字體,則需要上傳相應字體文件到網頁服務器中引用。不同瀏覽器所支持的字體格式不一樣,以下是幾種常見字體格式介紹︰

TureTrpe(.ttf)格式

.ttf字體是Windows和Mac的最常見字體,是一種RAW格式,支持這種字體的瀏覽器有IE9、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile、Safari4.2+

兼容︰基本兼容,IE兼容情況不是很好,缺點是未針對WEB優化文件本身往往比較大

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+

兼容︰IE9+,android4.4+,其他兼容良好

Embedded Open Type(.eot)格式

.eot字體是IE專用字體,可以從TrueType創建此格式字體,支持這種字體的瀏覽器有IE4+

SVG(.svg)格式

.svg字體是基于SVG字體渲染的一種方式,支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、IOS Mobile、Safari3.2+

了解了上面的知識後我們就需要為不同的瀏覽器準備不同的字體,通常我們會通過字體生成工具幫助我們生成各種格式的字體,因此無需過于在意字體之間的格式差別。

WOFF2

WOFF2(Web Open Font Format 2.0),相比woff最大的優化應該是加強了字體的壓縮比。

兼容︰除IE及低系統移動端,其他兼容情況較好

綜合比較後,從請求量上來看,woff\woff2格式文件最小︰woff2 < woff < ttf   eot < svg

樣式引入字體方法︰

body{

font-family: 'FZLTXHJW';

src: url('./FZLTXHJW.ttf') format('truetype'), url('./FZLTXHJW.svg') format('svg'),url('./FZLTXHJW.woff') format('woff');/*路徑要正確*/

font-weight: normal;

font-style: normal;

}

或︰

@font-face{font-family:"abc"; src: url('any.ttf') format('truetype');}

body{font-family:"abc";}

IIS服務器svg、woff、woff2等字體文件引用顯示404錯誤的解決方法︰

1.打開服務器IIS管理器,找到MIME類型

2.添加類型

文件擴展名      MIME類型 

.svg             image/svg+xml
.woff            application/x-font-woff
.woff2          application/x-font-woff

關于@font-face

@font-face是CSS3屬性,用來指定字體樣式的。指定字體名為xxx的字體,並指定在哪里可以找到它的url。

@font-face用法的簡要概述︰先用@font-face指定好字體名和url,然後給html元素的font-size賦值為@font-face中指定好的字體名稱,即可使用該字體。

什麼是format屬性?如何使用format屬性?

format屬性是幫助瀏覽器識別字體的。瀏覽器是不能根據字體url後綴去自動識別字體格式的,所以使用format屬性來幫助瀏覽器識別字體格式。  

  例如︰format(EmbeddedOpenType) 幫助瀏覽器識別.oet字體格式

  format(OpenType) 幫助瀏覽器識別.otf字體格式

字體格式如下︰

trueType格式(.ttf) -- Windows和Mac上常見的字體格式,是一種原始格式,因此它並沒有為網頁進行優化處理。 瀏覽器支持︰IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf) -- 以TrueType為基礎,也是一種原始格式,但提供更多的功能。瀏覽器支持︰FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff) -- 針對網頁進行特殊優化,因此是Web字體中最佳格式,它是一個開放的TrueType/OpenType的壓縮版,同時支持元數據包的分離。瀏覽器支持︰IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)  -- IE專用字體格式,可以從TrueType格式創建此格式字體。 瀏覽器支持︰IE4+

SVG格式(.svg) -- 基于SVG字體渲染的格式。 瀏覽器支持︰Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

網上流行的一種兼容性最高的@font-face語法︰

@font-face { 
font-family: ‘YourWebFontName’; 
src: url(‘YourWebFontName.eot’); /* IE9 Compat Modes */ 
src: url(‘YourWebFontName.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */ 
url(‘YourWebFontName.woff’) format(‘woff’), /* Modern Browsers */ 
url(‘YourWebFontName.ttf’) format(‘truetype’), /* Safari, Android, iOS */ 
url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’); /* Legacy iOS */ 
}

tips: 其中#後面表示引用名稱,類似于別名。因為不是所有格式都被瀏覽器識別,所以不識別的時候加上備用引用名稱。

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

马牌官网 | 下一页