使用 @font-face

mdluo 發(fā)布于2019-08-29 11:15 / 1728人閱讀

摘要：允許我們?cè)诰W(wǎng)頁(yè)里使用在線字體顯示文字。不使用這個(gè)命令的話，網(wǎng)頁(yè)可用的字體會(huì)受限于本地計(jì)算機(jī)的字體，同時(shí)非常依賴正在使用的操作系統(tǒng)。大小對(duì)比以我目前使用的為例，，，，，。

@font-face允許我們?cè)诰W(wǎng)頁(yè)里使用在線字體顯示文字。把它寫(xiě)到css中以后，瀏覽器就會(huì)根據(jù)其中指明的地址下載對(duì)應(yīng)的字體，然后按照css中的樣式來(lái)顯示字體。

不使用這個(gè)命令的話，網(wǎng)頁(yè)可用的字體會(huì)受限于本地計(jì)算機(jī)的字體，同時(shí)非常依賴正在使用的操作系統(tǒng)。也就是說(shuō)，我們?cè)赾ss指定一個(gè)字體，想要顯示出來(lái)的話，本地計(jì)算機(jī)要有這個(gè)字體才行，而且同樣的字體棧，在不同的操作系統(tǒng)下，默認(rèn)的字體也不一樣。╮(╯▽╰)╭

示例



  Web Font Sample
  


  This is Bitstream Vera Serif Bold.

詳解

@font-face {
  font-family: "字體名稱";
  src: 字體鏈接;
  font-variant: 字體變型，默認(rèn)normal;
  font-stretch: 字體拉伸，默認(rèn)normal;
  font-weight: 字體粗細(xì)，默認(rèn)normal;
  font-style: 字體樣式，默認(rèn)normal;
  unicode-range: 字體Unicode字符范圍，默認(rèn)U+0-10FFFF;
}

最大支持

這個(gè)寫(xiě)法就是當(dāng)前能支持瀏覽器最多的了，同時(shí)應(yīng)該保證把@font-face寫(xiě)在所有css的最頂端。

@font-face {
  font-family: "MyWebFont";
  src: url("webfont.eot"); /* IE9 Compat Modes */
  src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("webfont.woff2") format("woff2"), /* Super Modern Browsers */
       url("webfont.woff") format("woff"), /* Pretty Modern Browsers */
       url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
       url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Chrome：4.0+

Safari：3.1+

Firefox：3.5+

Opera：10.0+

IE：4.0+

Android：yes

iOS：yes

適合大多數(shù)情況的支持

@font-face {
  font-family: "MyWebFont";
  src:  url("myfont.woff2") format("woff2"),
        url("myfont.woff") format("woff");
}

這里只添加了woff和woff2，但是已經(jīng)可以支持大多數(shù)瀏覽器版本了，詳情如下：

Chrome：5+

Safari：5.1+

Firefox：3.6+

Opera：11.50+

IE：9+

Android：4.4+

iOS：5.1+

更加保守的支持

@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2"),
       url("myfont.woff") format("woff"),
       url("myfont.ttf") format("truetype");
}

添加了.ttf字體，這樣基本已經(jīng)可以涵蓋絕大多數(shù)瀏覽器了，詳情如下：

Chrome：3.5+

Safari：3+

Firefox：3.5+

Opera：10.1+

IE：9+

Android：2.2+

iOS：4.3+

更加激進(jìn)的支持

@font-face {
  font-family: "MyWebFont";
  src: url("myfont.woff2") format("woff2");
}

可以預(yù)期總有一天所有瀏覽器都會(huì)支持woff2，它目前的支持情況如下：

Chrome：36+

Safari：no

Firefox：35+ with flag

Opera：23

IE：no

Android：37

iOS：no

另一種技術(shù) @import

當(dāng)字體存在于我們自己服務(wù)器上的時(shí)候，使用@font-face無(wú)疑是非常棒的選擇，但是對(duì)于引用其他服務(wù)器字體，我們還有其他的辦法，就像下面這樣：

@import url(//fonts.googleapis.com/css?family=Open+Sans);

在css里的使用方法也是一樣

body {
  font-family: "Open Sans", sans-serif;
}

如果打開(kāi)這個(gè)鏈接，就會(huì)發(fā)現(xiàn)背后還是@font-face在起作用。

使用字體托管服務(wù)的好處有很多，除了CDN的好處之外，它能保持極高的跨瀏覽器字體兼容性，而無(wú)需自己去維護(hù)。想想上面那個(gè)最大兼容（而且一套字體可能會(huì)存在不同的文件對(duì)應(yīng)不同的unicode區(qū)間，文件數(shù)直接翻倍），簡(jiǎn)直不寒而栗啊。

字體文件簡(jiǎn)介 WOFF / WOFF2

代表：Web Open Font Format.

沒(méi)有錯(cuò)，這就是專門為網(wǎng)絡(luò)使用而創(chuàng)造的字體，相較于其它字體，woff的體積更小，更加適合網(wǎng)絡(luò)傳輸。

woff2是下一代的woff，有比woff更大的壓縮比。

SVG / SVGZ

代表：Scalable Vector Graphics (Font)

SVG是一種矢量字體，也就是說(shuō)放大到多少都沒(méi)問(wèn)題，而且手機(jī)瀏覽器對(duì)它的支持也很好。

SVGZ是SVG的壓縮版。

EOT

代表：Embedded Open Type.

這是由微軟創(chuàng)造出來(lái)的字體，目前也只有IE支持，但是如果想在IE4-IE8中使用@font-face的話，就得把它加進(jìn)去。

OTF / TTF

代表：OpenType Font and TrueType Font.

兩個(gè)很古老，也很有有淵源的字體，據(jù)說(shuō)woff最初的格式就是從這兩個(gè)字體中來(lái)的。

大小對(duì)比

以我目前使用的MarckScriptLatin為例：

svg：130KB，
otf：70KB，
ttf：31KB，
eot：31KB，
woff：18KB，
woff2：14KB。

可以看出woff2相當(dāng)具有優(yōu)勢(shì)。

其它

閑著沒(méi)事折騰下，其實(shí)也是想讓自己的網(wǎng)頁(yè)更好看一些，所謂愛(ài)美之心人皆有之。

看到@font-face的支持情況，IE4就支持了，所以說(shuō)這應(yīng)該是個(gè)相當(dāng)古老的命令了，而我還以為是css3帶出來(lái)的，真實(shí)太后知后覺(jué)了。

有前端的地方就有優(yōu)化，@fant-face也是這樣的，雖然網(wǎng)頁(yè)設(shè)計(jì)上來(lái)說(shuō)更好了，但是也要明白，瀏覽器要加載這些字體，也是要先下載到本地的，而一個(gè)字體文件通常不會(huì)很小（例如上面的例子，即使woff2也有14KB）。

而優(yōu)化的方案，也有很多。

參考

https://css-tricks.com/snippe...
https://developer.mozilla.org...