什么是@font-face及font-face如何在css中使用

Answer 1

@font-face {
font-family: <YourWebFontName>;/*自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family*/
src: <source> [<format>][,<source> [<format>]]*;/*自定义的字体的存放路径*/
[font-weight: <weight>];
[font-style: <style>];/*weight定义字体是否为粗体，style主要定义字体样式，如斜体*/
}

不过浏览器对各种字体解析不一致，下载到的字体通常只有.ttf格式。那么要兼容各主流浏览器就得通过在线字体转换网站【http://www.fontsquirrel.com/tools/webfont-generator】转换得到这几种字体【.eot,.woff,.ttf,.svg】

那么具体用法：
html：
<h2 class="Demo">Demo</h2>

先自定义好字体

@font-face {
font-family: 'NeuesBauenDemo';
src: url('../fonts/neues_bauen_demo-webfont.eot');
src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
font-weight: normal;
font-style: normal;
}

最后引用：
h2.Demo {
font-family: 'NeuesBauenDemo'/*通过这个引用下载的字体格式*/
}

Answer 2

Vue实践-CSS样式position/display/float属性对比使用