【转】CSS3属性 @font-face 整理
原文: http://www.w3cplus.com/content/css3-font-face
出自: w3cplus.com
一、语法规则
@font-face {
font-family: <YourWebFontName>;
src: url(<source> [<format>][,<source> [<format>]]*);
[font-weight: <weight>];
[font-style: <style>];
}
1.取值说明:
YourWebFontName是你自定义的字体名称;
source是你自定义的字体存放的路径,可以使用相对路径也可以是使用绝对路径;
format是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
2.实例:
/*定义*/
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot');
}
/*使用*/
div{
font-family:myFirstFont;
}
二、浏览器支持
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
三、format()格式
1.TureTpe(.ttf)格式:
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此它不为网站优化;支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;
2.OpenType(.otf)格式:
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能;支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;
3.Web Open Font Format(.woff)格式:
.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;
4.Embedded Open Type(.eot)格式:
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;
5.SVG(.svg)格式:
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。
四、实践
为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot?') format('eot');/*IE*/
src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
}
为了让各多的浏览器支持,你也可以写成:
@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 */
font-weight: normal;
font-style: normal;
}
五、字体下载网址
http://www.dafont.com/
https://fonts.google.com/ (需翻墙使用)
【转】CSS3属性 @font-face 整理的更多相关文章
- 常用CSS3属性整理
常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...
- 实用的CSS3属性和使用技巧
CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- 【原】常见CSS3属性对ios&android&winphone的支持
2个月前,我在博文<webapp开发中兼容Android4.0以下版本的css hack>中写过“那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了” ,在 ...
- css3网格效果(整理)
css3网格效果(整理) 一.总结 一句话总结: css3网格原理是渐变(linear-gradient)绘制图形,background-size属性指定重复的小单元的大小 多个渐变(linear-g ...
- 今天我们来讨论一下CSS3属性中的transition属性;
transition属性是CSS3属性:顾名思义英文为过渡的意思:主要有四个值与其一一对应:分别是property(CSS属性名称),duration过渡的时长,timimg-function转速曲线 ...
- 如何处理CSS3属性前缀
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- CSS3属性 box-shadow 向框添加一个或多个阴影
CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 让IE6/IE7/IE8浏览器支持CSS3属性
让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
随机推荐
- 16.0-uC/OS-III同步
同步 uC/OS-III中用于同步的两种机制:信号量和事件标志组 . 1.信号量 信号量最初用于控制共享资源的访问.信号量可用于ISR与任务间.任务与任务间的同步. “ N”表示信号量可以被累计.初始 ...
- sql server自定义排序
方法一: 比如需要对SQL表中的字段NAME进行如下的排序:张三(Z)李四(L)王五(W)赵六(Z) 按照sql中的默认排序规则,根据字母顺序(a~z)排,结果为:李四 王五 赵六 张三 自定义排序 ...
- [转]有return的情况下try catch finally的执行顺序
结论: 1.不管有没有出现异常,finally块中代码都会执行: 2.当try和catch中有return时,finally仍然会执行: 3.finally是在return后面的表达式运算后执行的(此 ...
- [pat]1068 Find More Coins
满背包问题,把体积和价值看成相等的.用滚动数组优化,然后额外开辟一个choice数组来记录每次的选择,然后回溯打印.因为要按字典序,先把价值进行排序.假如选最小的商品能装满m的话,那就把判断条件改成大 ...
- Python之模块导入
import sys #import module (.py)import functools #名词空间 functoolsprint(functools) print("-------- ...
- Python 第五阶段 学习记录之---Django 基础
Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...
- ajax返回数据为undefined
在使用ajax异步请求后台返回数据后,使用console.log(data.message)打印返回数据,显示为undefined.苦恼了很久,终于在网上找到了答案. 先给大家看下异步代码: /*清零 ...
- Linux configure,make,make install
https://www.cnblogs.com/tinywan/p/7230039.html https://www.sohu.com/a/191735643_505857 https://blog. ...
- LOJ #10130 点的距离
在LOJ做的第一道题. 最开始想复杂了qwq 想的是在求LCA的过程中统计向上的步数 其实此题很裸--就是求出u,v的LCA, 再分别用两点深度减去LCA的深度,再加起来就好了qwq---化简--- ...
- opencv学习之路(21)、模板匹配及应用
一.模板匹配概念 二.单模板匹配 #include "opencv2/opencv.hpp" #include <iostream> using namespace s ...