佛山外贸网站设计公司,建设银行手机银行网站用户名是什么,1个月能学好网站开发吗,龙岗区建设工程交易服务网前言 以前在给网页文字设置一些好看的字体时#xff0c;限于用户系统是否安装此字体#xff0c;而只能使用三种方法解决#xff0c;要么用通用字体#xff0c;要么用图片替换文本#xff0c;要么用Flash。而这几种方法却存在严重的缺陷。 现在好了#xff0c;font-face终…前言 以前在给网页文字设置一些好看的字体时限于用户系统是否安装此字体而只能使用三种方法解决要么用通用字体要么用图片替换文本要么用Flash。而这几种方法却存在严重的缺陷。 现在好了font-face终于解决了这种使用网络字体的问题。 浏览器兼容性问题 其实font-face并不是CSS3才出来的属性早在1998年它就在CSS2中使用了但是在CSS2.1中又被除去了CSS3又把它加了进来。 font-face语法 font-face {font-family: 字体名;src: 字体路径 [格式][,字体路径 [格式]]*;[font-weight: 粗细];[font-style: 样式]; } 取值说明 字体名此值指的就是你自定义的字体名称最好是使用你下载的默认字体他将被引用到你的Web元素中的font-family。如“font-family:”字体名”;” 字体路径此值指的是你自定义的字体的存放路径可以是相对路径也可以是绝路径 格式此值指的是你自定义的字体的格式主要用来帮助浏览器识别其值主要有以下几种类型truetype,opentype,truetype-aat,embedded-opentype,avg等 weight和style:这两个值大家一定很熟悉weight定义字体是否为粗体style主要定义字体样式如斜体。 属性值描述font-familyname必需。规定字体的名称。srcURL必需。定义字体文件的 URL。font-stretchnormalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded可选。定义如何拉伸字体。默认是 “normal”。font-stylenormalitalicoblique可选。定义字体的样式。默认是 “normal”。font-weightnormalbold100200300400500600700800900可选。定义字体的粗细。默认是 “normal”。unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 “U0-10FFFF”。 font-face小例子 style typetext/css font-face {font-family: Bungee Inline;font-style: normal;font-weight: 400;src: local(Bungee Inline), local(BungeeInline-Regular), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format(woff);unicode-range: U0000-00FF, U0131, U0152-0153, U02C6, U02DA, U02DC, U2000-206F, U2074, U20AC, U2212, U2215, UE0FF, UEFFD, UF000; }h2{font-family: Bungee Inline; } /style h2Lecepins Blog /h2 效果 代码块中font-family和src是必需的。src中的local()表是从本地系统查找字体如果找不到再从url()指定的查找。 format()指的是字体的格式常用字体格式如下 格式说明TureTpe(.ttf)格式.ttf字体是Windows和Mac的最常见的字体是一种RAW格式因此他不为网站优化,支持这种字体的浏览器有【IE9,Firefox3.5,Chrome4,Safari3,Opera10,iOS Mobile Safari4.2】OpenType(.otf)格式.otf字体被认为是一种原始的字体格式其内置在TureType的基础上所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5,Chrome4.0,Safari3.1,Opera10.0,iOS Mobile Safari4.2】Web Open Font Format(.woff)格式.woff字体是Web字体中最佳格式他是一个开放的TrueType/OpenType的压缩版本同时也支持元数据包的分离,支持这种字体的浏览器有【IE9,Firefox3.5,Chrome6,Safari3.6,Opera11.1】Embedded Open Type(.eot)格式.eot字体是IE专用字体可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4】SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4,Safari3.1,Opera10.0,iOS Mobile Safari3.2】。 src format属性兼容写法 关于兼容各个浏览器的兼容写法可以参考一下一个国外大神Paul Irish写的兼容代码 font-face {font-family: 字体名;src: url(字体名.eot); /* IE9 兼容模式 */src: url(字体名.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */url(字体名.woff) format(woff), /* 现代浏览器 */url(字体名.ttf) format(truetype), /* Safari, Android, iOS */url(字体名.svg#grablau) format(svg); /* Legacy iOS */} 通常来说有.woff和eot这两种就够了。 关于这个兼容写法请参考Bulletproof font-face Syntax 字体格式转换工具 当你只有一种字体格式文件的时候可以使用如下在线格式转换工具生成其它格式字体文件 Font Squirrel font-face generator Google Fonts 博客名称王乐平博客 博客地址http://blog.lepingde.com CSDN博客地址http://blog.csdn.net/lecepin