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