使用 @font-face

mdluo 发布于2019-08-29 11:15 / 1727人阅读

摘要：允许我们在网页里使用在线字体显示文字。不使用这个命令的话，网页可用的字体会受限于本地计算机的字体，同时非常依赖正在使用的操作系统。大小对比以我目前使用的为例，，，，，。

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

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

示例



  Web Font Sample
  


  This is Bitstream Vera Serif Bold.

详解

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111531.html

font-face 总结

摘要：说到，第一反应就会想到图标，就会想到阿里的平台，平台有一个编辑功能特别好用，你可以在原先的图标上进行位移放大缩小旋转等其实操作的步骤是平台有一个编辑功能特别好用，你可以在原先的图标上进行位移放大缩小旋转等如果我们手里有一些图标，想转换为的说到font-face，第一反应就会想到图标，就会想到阿里的iconfont平台，http://www.iconfont.cn/ iconfot平台...

sPeng 2019-08-29 12:55 评论0 收藏0
关于使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入权限检查。权限必须

摘要：是中定义字体的规则。首先，在使用时，在下没有问题，但是在下提示未能完成嵌入权限检查。访问，将编码转换为文件，这里命名为。保存并浏览器刷新后，中不再提示错误。@font-face是css3中定义字体的规则。首先，在使用weui时，在Chrome、Firefox下没有问题，但是在IE下提示“font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的&rdquo...

番茄西红柿 2019-04-23 13:28 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Pocher 2019-08-19 17:37 评论0 收藏0
博客引入漂亮字体二三事

摘要：火狐推迟对字体的支持，重点放在格式上。网络字体的效率字体文件的体积可能非常的大尤其是对于汉字，而且需要额外的连接，这些都会降低网站页面的加载速度。最近兴致上来，就想更换了那Blog标题字体(汉字的)；网上搜索了一番，发现蘇新詩柳繁體这款甚合我心；然后就着手搞将了起来，分分钟也算是替换了；但，这仅仅是此次折腾的开始；这就细细道来作为学习笔记记载。原文首发链接http://www.je...

Michael_Lin 2019-08-30 12:47 评论0 收藏0
CSS3 font-face使用

摘要：在之前，设计师必须使用已在用户计算机上安装好的字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到服务器上，它会在需要时被自动下载到用户的计算机上。您自己的的字体是在规则中定义的。在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它...

番茄西红柿 2019-04-23 11:50 评论0 收藏0