百变鹏仔-专注前端行业精选

百变鹏仔

当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-02 10:20:42浏览:1347分类:CSS

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;


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 红色


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯