@font-face模塊
可以幫助我們輕松解決Web頁面中使用優雅字體的方式，而且我們可以根據需要自定義多種字體，但是每個@font-face只能定義一種，若需要多個字體就啟用多個@font-face規則。
@font-face 主要就是把自己想要的，或者自己定義的Web字體嵌入到Web頁面中，然后這些字體就會被放置在服務器上，瀏覽器會根據指定的命令將對應的字體下載到本地緩存，使用它來修飾文本。也就是我們所說的Web字體嵌入。
| 描述符 | 值 | 描述 |
|---|---|---|
| font-family | name | 必需。規定字體的名稱。 |
| src | URL | 必需。定義字體文件的 URL。 |
| font-stretch |
|
可選。定義如何拉伸字體。默認是 "normal"。 |
| font-style |
|
可選。定義字體的樣式。默認是 "normal"。 |
| font-weight |
|
可選。定義字體的粗細。默認是 "normal"。 |
| unicode-range | unicode-range | 可選。定義字體支持的 UNICODE 字符范圍。默認是 "U+0-10FFFF"。 |
TrueType
Windows和Mac系統最常用的字體格式，其最大的特點就是它是由一種數學模式來進行定義的基於輪廓技術的字體，這使得它們比基於矢量的字體更容易處理，保證了屏幕與打印輸出的一致性。同時，這類字體和矢量字體一樣可以隨意縮放、旋轉而不必擔心會出現鋸齒。
EOT– Embedded Open Type (.eot)
EOT是嵌入式字體，是微軟開發的技術。允許OpenType字體用@font-face嵌入到網頁並下載至瀏覽器渲染，存儲在臨時安裝文件夾下。
OpenType(.otf)
OpenType是微軟和Adobe共同開發的字體，微軟的IE瀏覽器全部采用這種字體。致力於替代TrueType字體。
WOFF–WebOpen Font Format (.woff)
WOFF（Web開發字體格式）是一種專門為了Web而設計的字體格式標准，實際上是對於TrueType/OpenType等字體格式的封裝，每個字體文件中含有字體以及針對字體的元數據（Metadata），字體文件被壓縮，以便於網絡傳輸。
SVG(Scalable Vector Graphics) Fonts (.svg)
SVG是由W3C制定的開放標准的圖形格式。SVG字體就是使用SVG技術來呈現字體，還有一種gzip壓縮格式的SVG字體。
兼容所有瀏覽器的聲明方法:
|
1
2
3
4
5
6
7
8
9
10
|
@font-face {
font-family
:
'icomoon'
;
src
:
url
(
'../font/icomoon.eot'
); /* IE9兼容模式 */
src
:
url
(
'../font/icomoon.eot?#iefix'
)
format
(
'embedded-opentype'
), /* IE6~IE8 */
url
(
'../font/icomoon.woff'
)
format
(
'woff'
),
/* 現代瀏覽器 */
url
(
'../font/icomoon.ttf'
)
format
(
'truetype'
),
/* safari，Android,ios */
url
(
'../font/icomoon.svg#icomoon'
)
format
(
'svg'
); /* Legacy ios */
font-weight
:
normal
;
font-style
:
normal
;
}
|
示例：
index.html
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/stylesheet.css" /> <style> div{ font-family: amadeus_regularamadeusRg; } </style></head><body> <div>staven</div></body></html>
stylesheet.css
@font-face { font-family: 'amadeus_regularamadeusRg'; src: url('../fonts/amadeus-webfont.eot'); src: url('../fonts/amadeus-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/amadeus-webfont.woff2') format('woff2'), url('../fonts/amadeus-webfont.woff') format('woff'), url('../fonts/amadeus-webfont.ttf') format('truetype'), url('../fonts/amadeus-webfont.svg#amadeus_regularamadeusRg') format('svg'); font-weight: normal; font-style: normal;}
導入小圖標字體
index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/style.css" /> </head> <body> <div class="icon-firefox"></div> </body></html>
style.css
@font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?7gr0ck'); src:url('../fonts/icomoon.eot?7gr0ck#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?7gr0ck') format('truetype'), url('../fonts/icomoon.woff?7gr0ck') format('woff'), url('../fonts/icomoon.svg?7gr0ck#icomoon') format('svg'); font-weight: normal; font-style: normal;}[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-film:before { content: "\e900";}.icon-envelop:before { content: "\1f313";}.icon-smile2:before { content: "\e902";}.icon-chrome:before { content: "\e903";}.icon-firefox:before { content: "\e901";}.icon-IE:before { content: "\e904";}.icon-opera:before { content: "\e905";}.icon-safari:before { content: "\e906";}.icon-IcoMoon:before { content: "\e907";}