Powered by GitBook

@font-face

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着
@font-face模块的出现，我们在Web的开发中使用字体就不用再为只能使用Web安全字体烦恼了！

@font-face的语法规则：

@font-face {
   font-family: <YourWebFontName>;
   src: <source> [<format>][,<source> [<format>]]*;
   [font-weight: <weight>];
   [font-style: <style>];
 }

取值说明

YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体（下载回来的
叫什么字体，这里就填什么字体名），他将被引用到你的Web元素中的font-family。
如“font-family:"YourWebFontName";”

source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种
类型：truetype,opentype,truetype-aat,embedded-opentype,svg等；

weight和style:这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样
式，如斜体。

@font-face的实例运用：

iconfont

@font-face {
    font-family: "iconfont";
    src: url('http://cdn.bi-ci.com/dist_v2/font/iconfont/iconfont.eot');
    /* IE9*/
    src: url('http://cdn.bi-ci.com/dist_v2/font/iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('http://cdn.bi-ci.com/dist_v2/font/iconfont/iconfont.woff') format('woff'), 
    /* chrome、firefox */
    url('http://cdn.bi-ci.com/dist_v2/font/iconfont/iconfont.ttf') format('truetype'), 
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('http://cdn.bi-ci.com/dist_v2/font/iconfont/iconfont.svg#iconfont') format('svg');
    /* iOS 4.1- */

}

.iconfont {
    font-family: "iconfont" !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

Bootstrap的Glyphicons Halflings字体图标

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot');
    src: url('http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff2') format('woff2'), 
    url('http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.woff') format('woff'), 
    url('http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('http://cdn.bootcss.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

获取特殊字体

可以到Google Web Fonts和Dafont.com寻找自己需要的字体，当然网上也还有别的下载字体的地方,
如：[Webfonts](http://webfonts.fonts.com/),[Typekit](http://typekit.com/),[Kernest](http://kernest.com/),[Google Web Fonts](http://www.google.com/webfonts),[Kernest](http://kernest.com/licenses),[Dafont](http://www.dafont.com/),[Niec Web Type](http://nicewebtype.com/fonts/),不然
你点[这里](http://www.google.com/search?q=webfonts)将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体!


获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。
要获取这些字体格式，我们同样是需要第三方工具或者软件来实现，下面我给大家推荐一款我常用的一个工具
[fontsquirrel](http://www.fontsquirrel.com/tools/webfont-generator)

results matching ""

No results matching ""