css- @media ??@font-face 的理解

在我的博客园定制的css中有2个之前没有遇到的csss属性@font-face @media

@media

在css文件中的使用如下

`@media screen and (max-width: 1260px) { ?body { ???margin: 0 30px; ?}}@media screen and (max-width: 600px) { ?body { ???font-size: 13px; ?}}`

@media查询
@media 属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句来匹配各种类型的屏幕。
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
以上的代码意思是
当是屏幕而且宽度小于1260px的时候 把body的margin改成xxx 当是屏幕而且宽度小于600px的时候 把body的字体改成xxx

@font-face规则

网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

@font-face { ?font-family: 'FontAwesome'; ?font-style: normal; ?font-weight: normal; ?src: url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.woff") format('woff'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.ttf") format('truetype'), url("http://blog.zhaishidan.cn/css/font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');}