zoukankan      html  css  js  c++  java
  • 文字样式

    一、常用的文字样式

    常用的文字样式有字体(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>
    
    
  • 相关阅读:
    Redis源码分析(二十一)--- anet网络通信的封装
    leetcode 总结part1
    leetcode String to Integer (atoi)
    leetcode 165. Compare Version Numbers
    leetcode 189. Rotate Array
    leetcode 168. Excel Sheet Column Title
    leetcode 155. Min Stack
    leetcode 228. Summary Ranges
    leetcode 204. Count Primes
    leetcode 6. ZigZag Conversion
  • 原文地址:https://www.cnblogs.com/zgzeng/p/11946363.html
Copyright © 2011-2022 走看看