Web前端知识

首页 > 免费 > Web前端知识 >

css font的简写规则

来源:北京汇仁智杰科技有限公司   时间:2015-11-11   点击:

  CSS的命名规则是用英文字母 数字 和下划线(一般用小写)来命名.简写css font的好处有三:一是写起来方便(就像键盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解css。

  一、字体属性主要包括下面几个

  font-family,font-style,font-variant,font-weight,font-size,font

  font-family(字体族): “Arial”、“Times New Roman”、“宋体”、“黑体”等;

  font-style(字体样式): normal(正常)、italic(斜体)或oblique(倾斜);

  font-variant (字体变化): normal(正常)或small-caps(小体大写字母);

  font-weight (字体浓淡): 是normal(正常)或bold(加粗)。有些浏览器甚至支持采用100到900之间的数字(以百为单位);

  font-size(字体大小): 可通过多种不同单位(比如像素或百分比等)来设置, 如:12xp,12pt,120%,1em

  如果用 font 属性的话,就可以把几个样式进行简化,减少书的情况;font 属性的值应按以下次序书写(各个属性之间用空格隔开):

  顺序:font-style | font-variant | font-weight | font-size | line-height | font-family

  二、font的简写实例

  .font{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:arial,verdana; }

  上面的样式简写为:

  .font{font:italic small-caps bold 12px/1.5em arial,verdana;}

  三、font的简写注意事项

  1、简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。

  2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值

  font的属性简写里面常用的有5个是可以写在一起的:

  font-style设定斜体 如:font-style: italic;

  font-weight设定文字粗细 如:font-weight: bold;

  font-size设定文字大小 如:font-size: 12px;

  line-height设定行距 如:line-height: 150%;

  color设定文字颜色(注意不是font-color) 如:color: red;

  font-family设定字体 如:font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

  如何简写,其实顺序是很重要的,如果顺序错了,那就不会正确解析了

  正确的顺序是:

  font:是否斜体 字体粗细 字体大小/行高 字体样式

  例子:

  font: italic bold 12px/18px Arial, Helvetica, sans-serif ;

  当然最常用的是下面的写法:

  font: bold 12px/18px Arial;

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13370157521
业务QQ:373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰