美文网首页Web前端之路Web 前端开发
3.CSS 学习笔记第三节/字体属性和文本属性

3.CSS 学习笔记第三节/字体属性和文本属性

作者: iplaycodex | 来源:发表于2016-04-13 14:38 被阅读50次
    CSS 学习笔记第三节/字体属性和文本属性

    1.字体

    下面开始详细的属性介绍,
    Let's rock and roll


    font-family这个是设置字体的.例如:设置为宋体,微软雅黑.幼圆等等.

    /*属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。*/
    /*如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。多个字体系列是用一个逗号分隔指明:*/
    p{font-family:"微软雅黑", "宋体", "华文幼圆";}
    

    font-style这个属性用来修改文字的样式,比如:正常啦,斜体或者是加粗.

    1.p.normal {font-style:normal;}/*正常*/
    2.p.italic {font-style:italic;}/*斜体*/
    3.p.oblique {font-style:oblique;}/*文字向一边倾斜*/
    

    还好还好...


    font-size这个是用来设置文字的大小的,一般的单位有 px.em 以及百分比
    注意:
    浏览器中默认的字体大小是16px

    /*用固定像素设置字体*/
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:14px;}/*用 em 设置字体*/
    /*
    为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。
    em的尺寸单位由W3C建议。
    1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
    因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
    */
    h1 {font-size:2.5em;} /* 40px/16=2.5em */
    h2 {font-size:1.875em;} /* 30px/16=1.875em */
    p {font-size:0.875em;} /* 14px/16=0.875em */
    

    在 PC 端写页面的时候其实我们还是px 用的较多.


    font-weight设置字体的粗细

    /*normal 就是正常状态不加粗,bold 是加粗.其实也可以用数字来设置*/
    p.normal {font-weight:normal;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}
    

    OK,这个属性就总结到了这里


    结束语
    这一节我们学习了字体的一些相关属性,还是比较简单的..阴吹思婷.
    OK.鼓掌,撒花

    相关文章

      网友评论

        本文标题:3.CSS 学习笔记第三节/字体属性和文本属性

        本文链接:https://www.haomeiwen.com/subject/rxowlttx.html