当前位置 博文首页 > 笙:CSS——字体属性

    笙:CSS——字体属性

    作者:[db:作者] 时间:2021-09-10 16:30

    字体属性

    一、定义
    CSS Fonts (字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。
    二、字体系列
    1、CSS 使用 font family属性定义文本的字体系列
    2、举例:

    p { font-family: 'Microsort YaHei/微软雅黑'; }
    p { font-family: 'Courier New', Courier, monospace; }
    /* 字体可以写中文也可以写英文,但我们更提倡英文的写法,兼容性更好 */
    

    3、语法注意点
    (1)、各种字体之间必须使用英文状态下的逗号隔开;
    (2)、一般情况下,如果有空格隔开的多个单词组成的字体,加引号(单引号、双引号都可);
    (3)、尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示;
    (4)、最常用的几个字体:body{ font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; };

    三、字体大小
    1、CSS 使用 font-size 属性定义字体大小。
    2、语法:

    p { font-size: 20px; }
    body { font-size: 18px; }
    

    3、注意点
    (1)、标题标签比较特殊,需要单独指定文字大小;
    (2)、px(像素)大小是我们网页的最常用的单位;
    (3)、谷歌浏览器默认的文字大小为16px;
    (4)、不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不用默认大小;
    (5)、可以给body指定整个页面字体的大小;

    四、字体粗细

    1、CSS 使用 font-weight 属性设置文本字体的粗细
    2、语法:

    p { font-weight: bold; }
    

    3、常用属性值:
    (1)、normal——默认值(不加粗的);
    (2)、bold——定义粗体(加粗的);
    (3)、100-900——400等同于normal,而700等同于bold,注意这个数字后面不跟单位;
    4、注意点
    (1)、学会让加粗标签(比如h和strong等)不加粗,或者其他标签加粗;
    (2)、实际开发时,我们更喜欢用数字表示粗细;

    五、文字样式
    1、CSS使用font-style属性设置文本的风格
    2、语法:

    em { font-style: normal; }
    

    3、属性值
    (1)、normal——默认值,浏览器会显示标准的字体样式 font-style: normal;
    (2)、italic——浏览器会显示斜体的字体样式;
    4、注意点
    平时我们很少给文字加斜体,反而要给斜体标签(em, i)改为不倾斜的字体。

    六、字体复合属性
    1、字体属性可以把以上文字样式综合来写,可以节约代码
    2、语法:

    /* 字体的复合属性 */
            p {
                /* font-style: italic;
                font-weight: 700;
                font-size: 700;
                font-family: 'Microsoft YaHei'; */
                /* 复合属性:简写的方式,节约代码 */
                /* font: font-style font-weight font-size/font-height font-family; */
                /* font: italic 700 16px 'Microsoft yahei'; */
                font: 20px '黑体'}
    			body{ font: font-style font-weight font-size/font-height font-family; }
    

    3、注意点:
    (1)、使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开;
    (2)、不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用;

    七、总结
    在这里插入图片描述

    cs