2

@font-face允许我们在网页里使用在线字体显示文字。把它写到css中以后,浏览器就会根据其中指明的地址下载对应的字体,然后按照css中的样式来显示字体。

不使用这个命令的话,网页可用的字体会受限于本地计算机的字体,同时非常依赖正在使用的操作系统。也就是说,我们在css指定一个字体,想要显示出来的话,本地计算机要有这个字体才行,而且同样的字体栈,在不同的操作系统下,默认的字体也不一样。╮(╯▽╰)╭

示例

<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+

  • Safari:3.1+

  • Firefox:3.5+

  • Opera:10.0+

  • IE:4.0+

  • Android:yes

  • iOS:yes

适合大多数情况的支持

@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...


silence_iris
409 声望4 粉丝