前端开发 字体类属性语法详细介绍

个人笔记博客 http://www.sharedblog.cn/?post=110

1.字体类型：

    语法：

 

    font-family: 字体1,字体2,字体3;

    eg：

    body{
	    font-family: "微软雅黑","Microsft YaHei","Arial";
    } 

    注：①浏览器会优先识别字体1，如果找不到，识别字体2，如果所有列出的字体都找不到，显示浏览器默认字体

          ②多个字体之间用逗号分隔

          ③中文字体要加双引号，英文字体如果由多个单词组成中间有空格，也要加双引号

 

2.字体大小：

    语法：

    font-size：数值+单位;

    eg：

    p{
        font-size: 14px;
    }

    注：①字体大小一般设置偶数不设置奇数

          ②浏览器默认字体大小为16px

             font-size: 16px;  等价于  font-size: medium;

    利用CSS设置小于12px的字体大小 http://www.sharedblog.cn/?post=19

 

3.字体加粗：

    语法：

    font-weight: normal(常规字体)|bold(加粗)|bolder(加粗)|100-900;

    eg:

    h3{
        font-weight: normal;
    }

    注：将字体的加粗效果分为9个等级，其中100-500为常规字体，600-900为加粗字体

 

4.字体倾斜：

    语法：

    font-style: normal(常规字体)|italic(倾斜)|oblique(倾斜);

    eg:

    em{
        font-style: normal;
    }

 

5.设置小型大写字母字体：

    语法：

    font-variant: normal(常规字体)|small-caps(小型大写字母字体);

    注：此属性只对英文起作用

 

6.字体的复合写法：

    语法：

    font: style weight size family;

    eg：

    font: 14px "微软雅黑", Arial;

 

7.字体颜色：

    语法：

    color: 颜色值;

    颜色值得三种写法：

    ①十六进制： #fff 白色、 #000 黑色、 #foo 红色

    ②rgb写法： rgb(255,255,255) 白色、 rgb(0,0,0) 黑色

    ③使用颜色单词： black 黑色、 white 白色、 red 红色