• 文字样式


    一、常用的文字样式

    常用的文字样式有字体(font-family),字体大小(font-size),字体样式(font-style),字体的粗细(font-weight),字体大小写(font-variant),通常我们直接用复合样式。

    二、常用文字样式实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文字样式</title>
        <style>
                /* 1  font-family:字体,默认微软雅黑,可以同时设置多个字体,只有前面的字体没有,就用后面设置的字体*/
    
            /*
            2
            font-size:字体大小(单位:px,rem, %, em)
            px:谷歌浏览器默认字体大小为16px,最小识别为12px;
            rem:相对于html根标签的n倍,如谷歌浏览器的默认字体的大小为16px,那么font-size用rem为单位,那么设定字体的大小为16*n
            em:父级字体大小*n,假如<div>hello<span>world</span>!</div>,假如div的大小已经设定,那么span可以通过em单位,来设定和父级标签成倍数的大小
            % : 同em一样,为父级字体大小*n%
           */
    
             /*3. font-weight:字体粗细,normal(默认粗细),light(变细), bold(加粗),bolder(更加粗)*/
                /*给值:100-900的整百数*/
                /*400为normal,700为bold*/
    
            /*4.font-style:字体样式,也就是是否为斜体(italic)还有一个斜体(oblique),正常(normal)*/
    
    
                /*5.color:字体颜色*/
                /*颜色设置方法:color:颜色单词,color:#16进制;rgb*/
                rgba透明度,取值范围为0到1,0为完全透明,1为完全不透明
            div{
                font-family:华文中宋,华文彩云,华文楷体;
                font-size:100px;
                font-weight:400;
                font-style:italic;
                color:deepskyblue;
            }
            .span1{
                font-family:黑体;;
                font-size:2em;
                font-weight:500;
                font-style:normal;
                color:rgba(199, 31, 133, 0.5);
            }
            p{
                font-family: adobe ;
                font-size:50px;
                font-weight:400;
                font-style:oblique;
            }
            .span2{
                font-family: AIGDT;
                font-size:50%;
                font-weight:500;
                font-style:normal;
            }
    
        </style>
    </head>
    <body>
        <div>将军 <span class="span1">百战</span>  穿金甲,不破楼兰终不还</div>
        <p>关关 <span class="span2">雎鸠</span> ,在河之洲</p>
    </body>
    </html>
    
    
  • 相关阅读:
    java中的abstract、接口、final和Object
    java中的多态性
    java中的继承和覆盖
    面向对象编程
    java中的this
    java中的类与对象(2)
    java中的类与对象(1)
    Java中的运算及优先级
    Selenium Python
    Python学习①. 基础语法
  • 原文地址:https://www.cnblogs.com/zgzeng/p/11946363.html
Copyright © 2020-2023  润新知