码迷,mamicode.com
首页 > Web开发 > 详细

CSS字体

时间:2015-11-22 18:49:07      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

字体系列

【1】5种通用字体系列:拥有相似外观的字体系列

  serif字体:字体成比例,且有上下短线,包括Times\Georgia\New century Schoolbook
  sans-serif字体:字体成比例,且没有上下短线,包括Helvetica\Geneva\Verdana\Arial\Univers
  Monospace字体:字体不成比例,等宽字体,包括Courier\Courier New\Andale Mono
  Cursive字体:手写体,包括Zapf Chancery\Author\Comic Sans
  Fantasy字体:无法归类的字体,包括Western\Woodblock\Klingon

 

【2】特定字体系列:具体的字体系列

font-family:"宋体";
font-family:"arial";

 

【3】默认字体系列

  chrome/opera:"宋体"
  firefox:"微软雅黑"
  safari/IE:Times,"宋体"

 

font-family:字体系列1,字体系列2 ……
//【注意】若浏览器识别第一个字体,则以第一个字体显示;如果不识别,则尝试下一个。    
font-family: arial,“宋体”,“微软雅黑”;
//【注意】若写英文字体,一定要把英文字体写在前面,英文字体会影响到英文、数字和标点符号。
font-family: Times, New Century Schoolbook,New York, serif;
//【注意】若字体名中有一个或多个空格,要添加引号

 

字体加粗

【1】常用值

font-weight: normal(正常,默认)
font-weight: bold(加粗)

 

【2】所有值

  normal(正常)/bold(粗体)/bolder(更粗)/lighter(更细)
  100/200/300/400/500/600/700/800/900 (100为最细,900为最粗)

 

字体大小

【1】绝对字体大小

  xx-small/x-small/small/medium/large/x-large/xx-large


【2】相对字体大小

  smaller/larger


【3】em/%

  1em = 100%


【4】默认字体大小

  chrome/firefox/opera/IE/safari:16px


【5】最小字体大小

  chrome:12px
  opera:9px
  safari/IE/firefox:无

 

字体风格

font-style: normal(默认)
font-style: italic(斜体)
font-style: oblique(倾斜)

 

字体变形

font-variant:normal(默认)
font-variant:small-caps(小型大写字母)

 

行高

line-height: normal(默认)
line-height: 具体值

 

字体

  font: [[<font-style> || <font-variant> || <font-weight>]? <font-size>[/<line-height>?<font-family>]
    [注意]对于font-size,百分数相对于父元素来计算;对于line-height,百分数相对于元素的font-size来计算

 

font-face

@font-face {
    font-family: 自定义名称;
    src: url(../font/test.eot);
    src: url(../font/test.eot?#iefix) format("embedded-opentype"),
         url(../font/test.woff) format("woff"), 
         url(../font/test.ttf) format("truetype"),
         url(../font/test.svg#jq) format("svg");
}
//EOT:IE专用;WOFF:标准;TTF:最常见(safari/android/ios);SVG:图形格式(IE和firefox不支持)

 

两种调用字体的方法

【1】html(&#x + 小图标对应的unicode编码)

div{
    font-family: 自定义名称;
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
<div>&#xf048</div>

 

【2】css(\ + 小图标对应的unicode编码)(不兼容IE7-浏览器)

div{
    font-family: 自定义名称;
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
div:before{
    content: "\f048";
}
<div></div>

 

CSS字体

标签:

原文地址:http://www.cnblogs.com/xiaohuochai/p/4986285.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!