您的位置:首页> 前端教程> CSS3教程
文章导航

@font-face 用法

2019-9-17 08:58| 作者: admin| 查看: 2584| 评论: 0|来自: 蚂蚁部落

此属性的作用可以引入网络字体,如果不使用此属性,那么只能够使用本机已经安装的字体。

@font-face是css3新增的一个模块,其实在上世纪90年代,从IE4浏览器就开始支持,不过仅限于IE浏览器。

但是由于一些支持和效果上的原因,在css2.1中就删除了此属性;后来CSS3增加了此属性。

语法结构:

[CSS] 纯文本查看 复制代码
@font-face {
  font-family: <YourWebFontName>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

参数解析:

(1).YourWebFontName:必需,自定义字体的名称。

(2).source:必需,规定自定义字体的路径,可以是相对路径也可以是绝对路径。

(3).format:可选,规定自定义字体的格式,用来帮助浏览器识别,主要类型:truetype,opentype,truetype-aat,embedded-opentype,avg等。

(4).font-weight:可选,规定字体是否为粗体。

(5).font-style:可选,规定字体的样式,比如斜体。

常见自定义字体格式:

1.Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体。

浏览器支持:

IE4和IE4以上浏览器。

2.TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此不为网站所优化。

浏览器支持:

(1).Firefox3.5+。

(2).Chrome4.0+。

(3).Safari3.1+。

(4).Opera10.0+。

(5).iOS Mobile Safari4.2+。

3.Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离。

浏览器支持:

(1).IE9+。

(2).Firefox3.5+。

(3).Chrome6+。

(4).Safari3.6+。

(5).Opera11.1+。

4.OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能。

浏览器支持:

(1).Firefox3.5+。

(2).Chrome4.0+。

(3).Safari3.1+。

(4).Opera10.0+。

(5).iOS Mobile Safari4.2+。

5.SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式。

浏览器支持:

(1).Chrome4+。

(2).Safari3.1+。

(3).Opera10.0+。

(4).iOS Mobile Safari3.2+。

代码实例如下:

[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.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

上面将引入的字体自定义名称为"MyWebFont";并且能够兼容低版本IE浏览器。

兼容性处理介绍如下:

(1).在标准浏览器中,src属性支持后面跟着多个url,不同的浏览器会选择适合自己的字体;但是IE9之前的浏览器并不支持,当 src属性包含多个url时,它无法正确的解析而返回404错误,于是把仅IE9之前支持的EOT格式放在第一位,然后在url后加上 ?,这样 IE9之前的版本会把问号之后的内容当作 url 的参数;#iefix的作用,一是起到了注释功能,二是可以将url参数变为锚点,减少发送给服务器的字符。

(2).在上面的代码中,我们看到了两个src属性,通常只写下面的一个即可,第一个是为了支持IE9下的兼容模式(也就是IE9浏览器下使用IE7或者IE8默认渲染页面);由于在兼容模式下,浏览器对自定义字体的解析模式发生了变化,使用第一条中问号的方式已经失效,解决方案就是添加一个src: url('webfont.eot')。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部