CSS3字体

欢迎访问的我的个人博客http://liubofeng.com/

CSS3字体

CSS3 @font-face的语法规则

@font-face {
font-family: ;
src: [][, []]*;
[font-weight: ];
[font-style:

CSS3 @font-face的取值说明

YourWebFontName
自定义的字体名称，他将被引用到Web元素中的font-family
source
自定义的字体的存放路径，可以是相对路径也可以是绝路径
format
自定义字体的格式，主要用来帮助浏览器识别
weight和style
weight定义字体是否为粗体，style主要定义字体样式，如斜体

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal/condensed/ultra-condensed/extra-condensed/semi-condensed/expanded/semi-expanded/extra-expanded/ultra-expanded	可选。定义如何拉伸字体。默认是 “normal”。
font-style	ormal/italic/oblique	可选。定义字体的样式。默认是 “normal”。
font-weight	normal/bold/100/200	可选。定义字体的粗细。默认是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

CSS3 @font-face的字体格式

TureTpe(.ttf)格式：

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化
兼容性
IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+

OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能
兼容性
FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、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+、IOS Mobile Safari3.2+

CSS3 @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 */
## CS

Element {
font-family: 'YourWebFontName';}

CSS3 获取特殊字体

Fontsquirrel
https://www.fontsquirrel.com/tools/webfont-generator