龙喵专栏 /前端 /内容

CSS3 @font-face属性详细介绍

版权声明:龙喵网
网站网址:http://ailongmiao.com/

font-face是css3中允许使用自定义字体的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。到了今天这个时代自定义字体会越来越常用,因为前端自动化可以压缩中文未使用到的字体,从而减小中文字体文件体积,让更多的字体运用到web上。

字蛛支持grunt和gulp自动化构建工具,官方地址:字蛛

@font-face 属性介绍

言归正传,先看下font-face的基本用法。

@font-face {
   font-family: <YourDefineFontName>;
   src: <url> [<format>],[<source> [<format>]], *;
   [font-weight: <weight>];
   [font-style: <style>];
}

带中括号的属性为非必须选项。

font-family:为载入的字体取名字。
src:[url]加载字体,可以是相对路径,可以是绝对路径,也可以是网络地址。[format]定义的字体的格式,用来帮助浏览器识别。主要取值为:【truetype(.ttf)、opentype(.otf)、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
font-weight:定义加粗样式。
font-style:定义字体样式。

format对应字体格式 以及 常见兼容性写法:

@font-face {
  font-family: 'defineName';
  src: url('../fonts/singlemalta-webfont.eot');
  src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/singlemalta-webfont.woff') format('woff'),
       url('../fonts/singlemalta-webfont.ttf') format('truetype'),
       url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
  font-weight: normal;
  font-style: normal;
}

#iefix有何作用?
IE9 之前的版本没有按照标准解析字体声明,当 src 属性包含多个 url 时,它无法正确的解析而返回 404 错误,而其他浏览器会自动采用自己适用的 url。因此把仅 IE9 之前支持的 EOT 格式放在第一位,然后在 url 后加上 ?,这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用,一是起到了注释的作用,二是可以将 url 参数变为锚点,减少发送给服务器的字符。
为何有两个src?
绝大多数情况下,第一个 src 是可以去掉的,除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面,微软修改了在兼容模式下的 CSS 解析器,导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的,所以在上面添加一个不带问号的 src 属性便可以解决此问题。

把字体加载进来以后就可以使用了,使用方式很简单,font-family引入即可生效。

body {
    font-family: defineName;
}

兼容性

IE6-8仅支持 embedded-opentype(.eot)。
firefox3.5支持truetype(.ttf)、opentype(.otf)。
firefox3.6支持truetype(.ttf)和opentype(.otf)、WOFF(.woff)。
chrome支持truetype(.ttf)、opentype(.otf)、WOFF(.woff)、svg(.svg)。
safari支持truetype(.ttf)、opentype(.otf)、WOFF(.woff)、svg(.svg)。
opera支持truetype(.ttf)、opentype(.otf)、WOFF(.woff)、svg(.svg)。

格式介绍

目前最主要的几种网络字体(web font)格式包括WOFF,SVG,EOT,OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上,由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些,因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势,因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式,体积上比矢量图更小,适合在手机设备上使用。

EOT

Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的),这才催生了WOFF字体格式。然而,OpenType有很多独特的地方,受到很多设计者的喜爱。

前端工具参考

在线字体转换格式:字客网

字体转换网络字体工具并生成demo预览:font2web

前端导航:前端网址导航

版权声明:龙喵网
网站网址:http://ailongmiao.com/

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/400.html

[ web前端导航 ]:http://ailongmiao.com/web/

评论

继续阅读

无障碍 Web 开发

无障碍 Web 开发

Web前端 2019-06-04 5

良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

禁止用户打开HTML页面调试

Web前端 2019-05-18 5

有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

细数CSS伪元素及其用法

Web前端 2019-03-29 12

CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

  选择打赏方式

打赏

打赏