@font-face { font-family: <FontName>; //自定义的字体名称 src: <source> [<format>][,<source> [<format>]]*; //字体文件路径 [font-weight: <weight>]; //是否加粗 [font-style: <style>]; //是否斜体} 由于各个浏览器对字体文件支持格式不同，所以我们一般引用多个格式的字体文件（eot/woff/ttf/svg）,font-weight用于设置字体粗细，font-style用于设置是否是斜体。 Tip：一般我们容易得到的字体文件是ttf格式的，可以通过http://www.fontsquirrel.com/tools/webfont-generator将ttf转换为其他几种字体。3.实践效果：
Demo下载(第二种效果字体文件略大)4.相关资料https://icomoon.io/ 利用图标制作图片http://www.fontsquirrel.com/tools/webfont-generator 字体转换工具http://www.dafont.com/ 字体库http://www.w3cplus.com/content/css3-font-face/ font-face详解（非常详细，推荐）5.Bootstrap中的@font-face Bootstrap2.x中的glyphicon组件是利用CSS Spirit实现小图标的展示效果，到了3.x改用@font-face实现，源码如下：@font-face { //引入字体文件 font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}.glyphicon { //基础样式 position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}//小图标内容设置.glyphicon-cloud:before { content: "/2601";}.glyphicon-envelope:before { content: "/2709";}……共计200+图标样式（具体可参考 http://v3.bootcss.com/components/） 可以注意到，这里都是用content:""设置的，应用时给相应元素（一般为span或ul）加上“glyphiconglyphicon-***”类即可。多说一句，如果不利用before伪元素的特性，如何在普通文本上显示小图标呢？这里content内的字符默认是保存在Unicode PRivate Use Area（即用户自定义字符区域）中的，如果要在HTML中使用则需加&#x，这个原理是将其转化为html实体。以下两个span的显示效果是相同的。 <span class="glyphicon glyphicon-envelope"></span> <span class="glyphicon">✉</span> OK,That's all,欢迎吐槽。新闻热点
疑难解答
