CSS字体

字体系列

【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;
//【注意】若字体名中有一个或多个空格,要添加引号

【4】中文字体

  对于中文字体来说,常见的是宋体和微软雅黑。宋体是衬线字体,而微软雅黑是无衬线字体。衬线字体常用于排版印刷,而无衬线字体则常用于网页中

  一般地,一行中有30-40个文字时,行高为1.5时,有较好的阅读体验。对于标题来说, 更好的样式是取消其加粗设置,并改变其颜色,增加页面的层次感

 

字体加粗

【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-size

  font-size字体大小设置的是字体中字符em框的高度,实际的字符字形通常比字符em框要矮,与字体类型有关

  值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit

  初始值: medium

  应用于: 所有元素

  继承性: 有

  百分数: 相对于父元素的字体大小font-size

字体风格

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来计算

 

关键字

  CSS标准定义了6个系统字体关键字:

  caption: 由标题控件使用的字体样式,如按钮和下拉控件

  icon: 系统图标所用的字体样式,如文件夹和文件图标

  menu: 下拉菜单和菜单列表中文本使用的字体样式

  message-box: 对话框中文本使用的字体样式

  small-caption: 由标题小控件的标签使用的字体样式

  status-bar: 窗口状态条中文本使用的字体样式

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>

【实例】

  下面以一个实例来说明如何使用字体图标,最终的效果如下

  一般地,使用国内的iconfont网站来寻找需要的字体图标,如晴、阴、雨、雪图标,将其新建为一个项目,并将项目文件下载到本地。下载的文件中包含了需要的字体文件及使用范例

iconfont

  最终代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
@font-face {
  font-family: 'iconfont';  
  src: url('font/iconfont.eot');
  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  url('font/iconfont.woff') format('woff'),
  url('font/iconfont.ttf') format('truetype'),
  url('font/iconfont.svg#iconfont') format('svg');
}
.weatherBox input{
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
}
.weatherBox label{
    font-family: 'iconfont';
    -webkit-font-smoothing:antialiased;//字体抗锯齿、光滑度属性
    -mox-osx-font-smoothing: grayscale;//字体抗锯齿、光滑度属性
}
.weatherBox label + label{
    margin-left:10px;
}
.weatherBox label:hover{
    color: lightblue;
}
.icon-sunny:before { content: "\e601"; }
.icon-snowy:before { content: "\e603"; }
.icon-cloudy:before { content: "\e605"; }
.icon-rainy:before { content: "\e606"; }
</style>    
</head>
<body>
<div class="weatherBox">
    <label class="icon-sunny">
        <input type="radio" name="weather" id="sunny">晴
    </label>
    <label  class="icon-cloudy">
        <input type="radio" name="weather" id="cloudy">阴
    </label>
    <label  class="icon-rainy">
        <input type="radio" name="weather" id="rainy">雨
    </label>
    <label  class="icon-snowy">
        <input type="radio" name="weather" id="snowy">雪
    </label>    
</div>    
</body>
</html>

results matching ""

    No results matching ""