使用 @font-face

時間 2019-11-09

標籤使用 font face 简体版

原文原文鏈接

@font-face容許咱們在網頁裏使用在線字體顯示文字。把它寫到css中之後，瀏覽器就會根據其中指明的地址下載對應的字體，而後按照css中的樣式來顯示字體。css

不使用這個命令的話，網頁可用的字體會受限於本地計算機的字體，同時很是依賴正在使用的操做系統。也就是說，咱們在css指定一個字體，想要顯示出來的話，本地計算機要有這個字體才行，並且一樣的字體棧，在不一樣的操做系統下，默認的字體也不同。╮(╯▽╰)╭html

示例

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: local("Bitstream Vera Serif Bold"),
           local("BitstreamVeraSerif-Bold"),
           url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

詳解

@font-face {
  font-family: '字體名稱';
  src: 字體連接;
  font-variant: 字體變型，默認normal;
  font-stretch: 字體拉伸，默認normal;
  font-weight: 字體粗細，默認normal;
  font-style: 字體樣式，默認normal;
  unicode-range: 字體Unicode字符範圍，默認U+0-10FFFF;
}

最大支持

這個寫法就是當前能支持瀏覽器最多的了，同時應該保證把@font-face寫在全部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+css3
Safari：3.1+web
Firefox：3.5+api
Opera：10.0+瀏覽器
IE：4.0+服務器
Android：yes網絡
iOS：yessvg

適合大多數狀況的支持

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

這裏只添加了woff和woff2，可是已經能夠支持大多數瀏覽器版本了，詳情以下：

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字體，這樣基本已經能夠涵蓋絕大多數瀏覽器了，詳情以下：

Chrome：3.5+
Safari：3+
Firefox：3.5+
Opera：10.1+
IE：9+
Android：2.2+
iOS：4.3+

更加激進的支持

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

能夠預期總有一天全部瀏覽器都會支持woff2，它目前的支持狀況以下：

Chrome：36+
Safari：no
Firefox：35+ with flag
Opera：23
IE：no
Android：37
iOS：no

另外一種技術 @import

當字體存在於咱們本身服務器上的時候，使用@font-face無疑是很是棒的選擇，可是對於引用其餘服務器字體，咱們還有其餘的辦法，就像下面這樣：

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

在css裏的使用方法也是同樣

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

若是打開這個連接，就會發現背後仍是@font-face在起做用。

使用字體託管服務的好處有不少，除了CDN的好處以外，它能保持極高的跨瀏覽器字體兼容性，而無需本身去維護。想一想上面那個最大兼容（並且一套字體可能會存在不一樣的文件對應不一樣的unicode區間，文件數直接翻倍），簡直毛骨悚然啊。

字體文件簡介

WOFF / WOFF2

表明：Web Open Font Format.

沒有錯，這就是專門爲網絡使用而創造的字體，相較於其它字體，woff的體積更小，更加適合網絡傳輸。

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

SVG / SVGZ

表明：Scalable Vector Graphics (Font)

SVG是一種矢量字體，也就是說放大到多少都沒問題，並且手機瀏覽器對它的支持也很好。

SVGZ是SVG的壓縮版。

EOT

表明：Embedded Open Type.

這是由微軟創造出來的字體，目前也只有IE支持，可是若是想在IE4-IE8中使用@font-face的話，就得把它加進去。

OTF / TTF

表明：OpenType Font and TrueType Font.

兩個很古老，也頗有有淵源的字體，聽說woff最初的格式就是從這兩個字體中來的。

大小對比

以我目前使用的MarckScriptLatin爲例：

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

能夠看出woff2至關具備優點。

其它

閒着沒事折騰下，其實也是想讓本身的網頁更好看一些，所謂愛漂亮之心人皆有之。

看到@font-face的支持狀況，IE4就支持了，因此說這應該是個至關古老的命令了，而我還覺得是css3帶出來的，真實太后知後覺了。

有前端的地方就有優化，@fant-face也是這樣的，雖然網頁設計上來講更好了，可是也要明白，瀏覽器要加載這些字體，也是要先下載到本地的，而一個字體文件一般不會很小（例如上面的例子，即便woff2也有14KB）。

而優化的方案，也有不少。

參考

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。