- 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+;
-
- 了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。
- 下载字体的网站.
-
- 推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体
-
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- p {
- font-family: 'webfont';
- font-size: 30px;
- }
- /* 如果在网页中使用web字体(用户电脑上没有这种字体)*/
- /* 声明字体 */
- @font-face {
- font-family: 'webfont';
- src: url('font/webfont.eot'); /* IE9*/
- src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('font/webfont.woff') format('woff'), /* chrome、firefox */
- url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
- url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
- }
- </style>
- </head>
- <body>
- <p>苍茫的天涯我的爱...</p>
- </body>
- </html>
-