学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

CSS基础教程(六) Fonts字体

发布时间:2020-01-02 点击:39

    在CSS中有关于Fonts字体相关的设置,比如:字体大小、字体字型、字体样式、字体系列、字体粗细等。

    一、字体大小

    字体大小是通过font-size属性来设置的,但是设置时有两种方式

    1、绝对大小

    绝对大小就是说给字体设置一个固定的值,比如:

    p {font-size:14px;}
    p {font-size:0.875em;} /* 14px/16=0.875em */
    其中可以是像素px,也可以是em,1em=16px。这个是由W3C建议的,使用的时候请注意换算。

    2、相对大小

    相对大小就是值使用的是百分比方式:

    body {font-size:100%;}

    二、字体样式

    在CSS中字体样式是通过font-style属性来定义的,可选值有:

    normal 默认值。浏览器显示一个标准的字体样式。

    italic 浏览器会显示一个斜体的字体样式。

    oblique 浏览器会显示一个倾斜的字体样式。

    inherit 规定应该从父元素继承字体样式。

    p{font-style:normal}
    p{font-style:italic}
    p{font-style:oblique}

    三、字体系列

    字体系列是通过font-family来设置的,

    font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

    PS: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。

    多个字体系列是用一个逗号分隔指明:

    p{font-family:"Times New Roman", Times, serif;}

    四、小型大写字母

    小型大写字母使用的是font-variant,其值有:

    normal 默认值。浏览器会显示一个标准的字体。

    small-caps 浏览器会显示小型大写字母的字体。

    inherit 规定应该从父元素继承 font-variant 属性的值。

    效果如下:

    五、字体粗细

    字体的粗细是由font-weight来设置的,可选值有:

    normal 默认值。定义标准的字符。

    bold 定义粗体字符。

    bolder 定义更粗的字符。

    lighter 定义更细的字符。

    inherit 规定应该从父元素继承字体的粗细。

    也可以用100、200、300、400~900来定义粗细(由粗到细),其中normal相当于400,bold相当于700.
    p{font-weight:bold;}

    六、属性简写

    同background一样,字体也有一个font属性。

    p
    {
        font:italic bold 12px/30px Georgia, serif;
    }

    属性总结:

    序号
    属性
    描述
    1
    font
    字体属性
    2
    font-family
    设置字体系列
    3
    font-size
    设置字体大小
    4
    font-style
    设置字体样式
    5
    font-variant
    设置小型大写字体
    6
    font-weight
    设置字体粗细
    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: