CSS3魔法堂:认识@font-face和Font Icon
一、前言
过去我们总通过图片来美化站点的LOGO、标题、图标等,而现在我们可以通过@font-face获取另一种更灵活的美化方式。
二、看看例子
/* 定义 */
@font-face {
font-family: 'MicrosoftYaHei';
src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */
url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
} /* 使用 */
body{
font-family: "MicrosoftYaHei";
}
说起让人感到十分惊讶,那就是IE4开始已经支持@font-face了,只是近些年才被大家广泛使用而已。
而@font-face的好处是即使系统没有该字体我们也能使用;缺点就是需要浏览器需要下载字体,因此消耗用户流量,并且首次下载会造成页面打开延迟。。
二、语法规则
/* 定义字体 */
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
font-family: <YourWebFontName> :自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。
src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式
srouce :字体的加载路径,可以是绝对或相对URL。
format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
src属性后还有一个 local(font name) 字段,表示从用户系统中加载字体,失败后才加载webfont。
src: local(font name), url("font_name.ttf")
三、字体格式
对于@font-face而言,兼容性问题就是各浏览器所能识别的字体格式不尽相同。
TrueType格式(.ttf)
Windows和Mac上常见的字体格式,是一种原始格式,因此它并没有为网页进行优化处理。
浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
以TrueType为基础,也是一种原始格式,但提供更多的功能。<br/>
浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
针对网页进行特殊优化,因此是Web字体中最佳格式,它是一个开放的TrueType/OpenType的压缩版,同时支持元数据包的分离。<br/>
浏览器支持:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE专用字体格式,可以从TrueType格式创建此格式字体。
浏览器支持:IE4+
SVG格式(.svg)
基于SVG字体渲染的格式。
浏览器支持:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+
为解决兼容性问题,Paul Irish写了称为Bulletproof的一个独特的@font-face语法:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
四、获取Web字体
到Google Web Fonts和Dafont.com下载.ttf格式字体,然后通过Font Squirrel来生成.woff等格式的字体。
以下站点也可以获取Web字体:
五、注意事项
1. @font-face遵循先定义后使用原则;
2. 由于中文字体太大,因此建议若中文LOGO还是使用图片。而英文LOGO则可使用@font-face代替图片;
3. @font-face无效有可能是字体的加载路径错误;
4. FireFox中@font-face的字体加载路径使用相对路径时,可能会失败,具体原因和解决办法如下:
a). 使用绝对路径可解决问题;
b). 在file uri scheme的情况下(file:///),由于FireFox默认的file uri origin策略十分严格,不同路径等级则无法访问。所以相对路径被视为跨域操作,因此字库加载失败。可通过 about:config 进入浏览器设置界面,然后将 security.fileuri.strict_origin_policy 设置为false即可;
c). 在http/https uri scheme的情况下(http:///或https:///),则需要对.eot、.ttf和.woff等字体文件的响应头中加入 Access-Control-Allow-Origin: * ,从而允许跨域请求。
六、Font Icon
大家应该使用过 © 这类符号实体,从而在页面上显示一些无法通过键盘直接输入的符号。但这类符号实体是固化在浏览器中,没办法对其进行自定义,所以我们往往会使用图片来代替。不过通过@font-face来实现的Font Icon,我们可以自定义并使用各种符号实体——这些符号实体正确来说应该叫做Web实体符。
Web实体符不像HTML实体那样规定必须以 &entity_name 、 &#entity_number 形式表示,而是更灵活的表示方式(如字母A就代表某个字体图标等)
首先我们要获取为Font Icon而设计的字体
1. Guifx字体
2. WebSymbols字体
3. Font Awesome
由robmadole和supercodepoet两大师在Bootstrap Icon的基础上将Icon图片换成Font Icon。
然后按第二节的方式使用即可。元素的font-family值为所定义的@font-face时,该元素下的字符则会自动渲染为对应的Font Icon。
七、自定义Font Icon
由于使用既定的Web字体库需要将整个字体库都下载下来,而实际上用到的Font Icon则只有数个而已,因此通过自定义Font Icon则可以个性化且减少字体库体积。
工具:Fontomas提供四种字体来制作Icon。分别是Entypo,IconicFill,IconicStroke,WebSymbolsRegular。
Fontomas提供的是SVG格式字体,我们可以通过FontSquirrel或OnlineFontconverter来生成其他格式的字体。
另外还有fontforge工具来自定义Web字体,具体请见@张鑫旭的《fontforge制作自定义字体及在手机上应用举例》
若要对已有的字体进行修改而不仅仅是提取的话可以是用IcoMoon,具体还是参考@张鑫旭的《如何灵活利用免费开源图标字体-IcoMoon篇》
八、总结
若有纰漏请大家指正,谢谢。
尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4320083.html ^_^肥仔John
九、参考
http://www.w3cplus.com/content/css3-font-face
http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
http://www.dynamicdrive.com/forums/showthread.php?63628-font-face-not-working-in-Firefox-5
http://www.w3cplus.com/css3/web-icon-with-font-face
http://www.webhek.com/tag/web-font/
http://www.paulirish.com
CSS3魔法堂:认识@font-face和Font Icon的更多相关文章
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- CSS3魔法堂:说说Multi-column Layout
前言 是否记得<读者文摘>中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊.杂志独有的多栏布局吗? 当我们希望将报刊.杂志中的阅读体验迁移到网页上时,最简单直接的方式就是采用 ...
- CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]
一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...
- CSS3魔法堂:背景渐变(Gradient)
一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变 1. 线性渐变 示例——七彩虹 ...
- CSS3魔法堂:禁止用户改变textarea大小
一.前言 在FF.Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅与IE下textarea的行为特点有异,而且textarea的大小变化会撑大其父节点从而破坏整体 ...
- CSS魔法堂:深入理解line-height和vertical-align
前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vertical-align基情四射,贵圈真乱啊 ...
- CSS魔法堂:一起玩透伪元素和Content属性
前言 继上篇<CSS魔法堂:稍稍深入伪类选择器>记录完伪类后,我自然而然要向伪元素伸出"魔掌"的啦^_^.本文讲讲述伪元素以及功能强大的Contet属性,让我们可以通 ...
- CSS魔法堂:Box-Shadow没那么简单啦:)
前言 说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...
- CSS魔法堂:重拾Border之——更广阔的遐想
前言 当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...
随机推荐
- Yii2中的入口文件环境配置
默认的Debug配置 在入口文件中 defined ( 'YII_DEBUG' ) or define ( 'YII_DEBUG', true ); defined ( 'YII_ENV' ) or ...
- Java设计模式8:迭代器模式
迭代器模式 迭代器模式又叫做游标(Cursor)模式,其作用是提供一种方法访问一个容器元素中的各个对象,而又不暴露该对象的内部细节. 迭代器模式结构 迭代器模式由以下角色组成: 1.迭代器角色 负责定 ...
- 细说angular Form addControl方法
在本篇博文中,我们将接触angular的验证.angular的验证是由form 指令和ngModel协调完成的.今天博主在这里想要说的是在验证在的一种特殊情况,当验证控件没有没有name属性这是不会被 ...
- IE浏览器不能自动显示PDF文件的解决办法
今天更新了Adobe的PDF Reader,更新后发现在网页上无法预览PDF文件了,点击PDF的连接,浏览器就会提示下载或者打开,感觉很不爽,经过一番百度,找到了解决办法,在这里分享一下. 打开IE浏 ...
- c基础回顾
发现一个很好的c学习网站http://see.xidian.edu.cn/cpp/html/ 做了一些练习: #include <string.h> #include <stdio. ...
- 每天一个linux命令(59):rcp命令
rcp代表“remote file copy”(远程文件拷贝).该命令用于在计算机之间拷贝文件.rcp命令有两种格式.第一种格式用于文件到文件的拷贝:第二种格式用于把文件或目录拷贝到另一个目录中. 1 ...
- 知方可补不足~SQL为大数据引入分区表
回到目录 一些概念 分区表在oracle和sqlserver中都上存在的,当数据表的数据量过大时,上千万,上亿的数据,在进行数据查询时需要显得比较慢,性能很差,这时是时候引入分区表了,分区表顾名思义, ...
- atitit 英文与中文与阿拉伯文的简化解决方案.docx
atitit 英文与中文与阿拉伯文的简化解决方案.docx 1. 英文与中文与阿拉伯文的简化意义1 2. 简化的主要方法分类2 2.1. 同音替代法(比如o2o)2 2.2. 符号法(比如英文i18n ...
- Atitit 图片 验证码生成attilax总结
Atitit 图片 验证码生成attilax总结 1.1. 图片验证码总结1 1.2. 镂空文字 打散 干扰线 文字扭曲 粘连2 1.1. 图片验证码总结 因此,CAPTCHA在图片验证码这一应用点 ...
- Java 集合 — HashMap
HashMap 无序(每次resize的时候都会变) 非线程安全 key和value都看可以为null 使用数组和链表实现 查找元素的时候速度快 几个重要属性: loadFactor:用来计算thre ...