CSS @font | css font face
![CSS @font](https://i.imgur.com/axBPWDg.jpg)
摘要:本文主要介紹字型載入優化的常用策略,大部分內容為引用和翻譯。一、font-face基本用法font-face的基本用法想必大家都是知道的,基本上就是類似這樣:@font-face{font-family:Lato;src:url(font-lato/...本文主要介紹字型載入優化的常用策略,大部分內容為引用和翻譯。一、font-face基本用法font-face的基本用法想必大家都是知道的,基本上就是類似這樣:@font-face{font-family:Lato;src:url(font-lato/lato-regular-webfont.woff2)format(woff2),url(font-lato/lato-regular-webfont.woff)format(woff),url(font-lato/lato-re...
![CSS @font](http://pix4.agoda.net/hotelimages/4172139/0/24097f8fc1c9959ea5062e8d6497eaad.jpg?s=800x)
摘要: 本文主要介紹字型載入優化的常用策略,大部分內容為引用和翻譯。 一、 font-face基本用法 font-face的基本用法想必大家都是知道的,基本上就是類似這樣: @font-face { font-family: Lato; src: url(font-lato/...
本文主要介紹字型載入優化的常用策略,大部分內容為引用和翻譯。
一、 font-face基本用法font-face的基本用法想必大家都是知道的,基本上就是類似這樣:
@font-face { font-family: Lato; src: url(font-lato/lato-regular-webfont.woff2) format(woff2), url(font-lato/lato-regular-webfont.woff) format(woff), url(font-lato/lato-regular-webfont.ttf) format("opentype"); } p { font-family: Lato, serif; } 複製程式碼這樣就可以使我們的網頁用上自定義字型了。 除了font-family 和 src屬性之外,還擁有font-style以及font-weight屬性。 src可以指定多種字型,會按順序依次適用,比如上面的示例中會先載入woff2字型,如果失敗再載入woff字型,否則載入opentype字型。 src所支援的字型可以有以下型別:
src引數帶不帶引號都可以,引數的格式不同含義也不盡相同,比如下面:
src: url(fonts/simple.woff);/* 載入simple.woff,地址相對於樣式表的地址 */ src: url(/fonts/simple.woff);/* 載入simple.woff,地址是網站的絕對地址 */ src: url(fonts/coll.otc#foo);/* 從coll.otc字符集中載入foo字型 */ src: url(fonts/coll.woff2#foo);/* 從coll.woff2字符集中載入foo字型 */ src: url(fonts.svg#simple);/* 載入...取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
@font-face - CSS | css font face
CSS 網頁字型@font | css font face
CSS @font | css font face
CSS Web Fonts | css font face
Using @font-face | css font face
CSS | css font face
css3中的@font | css font face
CSS font | css font face
CSS @font | css font face
CSS沒有極限- Web-font & icons 3連發 | css font face
![](https://i.imgur.com/axBPWDg.jpg)