在我的博客园定制的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');}