CSS3文本和字体 -- 笔记 - 图2review0511 myfont

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS字体</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family: 'myfont';
  9.             src: url('font/myFont.eot');
  10.             src: url('font/myFont.eot?#iefix') format('embedded-opentype'),
  11.             url('font/myFont.ttf') format('truetype'),
  12.             url('font/myFont.woff') format('woff'),
  13.             url('font/myFont.svg#myFont') format('svg');
  14.         }
  15.         h1 {
  16.             font-family: 'myfont';
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <h1>
  22.         将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。
  23.     </h1>
  24. </body>
  25. </html>

review0511 text-align-last

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-align-last</title>
    <style type="text/css">
        h1 { 
            width: 700px; 
            margin: 10px auto; 
            background: #abcdef;
            /*text-align: justify;*/
        }
        h1:nth-child(1) { 
            text-align-last: auto; 
        }
        h1:nth-child(2) { 
            text-align-last: left; 
        }
        h1:nth-child(3) { 
            text-align-last: right; 
        }
        h1:nth-child(4) { 
            text-align-last: center; 
        }
        h1:nth-child(5) { 
            text-align-last: justify; 
        }
        h1:nth-child(6) { 
            text-align-last: start; 
        }
        h1:nth-child(7) { 
            text-align-last: end; 
        }
        h1:nth-child(8) { 
            text-align-last: initial; 
        }
        h1:nth-child(9) { 
            text-align-last: inherit; 
        }
        h1 > span { 
            color: red; 
        }
    </style>
</head>
<body>
    <h1>
        <span>text-align-last: auto;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: left;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: right;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: center;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: justify;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: start;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: end;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: initial;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>text-align-last: inherit;</span><br>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。<br>那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。<br>前世，储蓄梦想；今生，演绎铿锵。
    </h1>
</body>
</html>

review0511 text-overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</title>
    <style type="text/css">
        h1 { 
            width: 700px; 
            margin: 10px auto; 
            background: #abcdef; 
            overflow: hidden;
            /*hidden很重要 */
        }
        h1:nth-child(1) { 
            text-overflow: clip; 
        }
        h1:nth-child(2) { 
            text-overflow: ellipsis; 
        }
        h1:nth-child(3) { 
            text-overflow: '>>'; 
        }
        h1 > span { 
            color: red; 
        }
    </style>
</head>
<body>
    <h1>
        <span>text-overflow: clip;</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk
    </h1>
    <h1>
        <span>text-overflow: ellipsis;</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk
    </h1>
    <h1>
        <span>text-overflow: '>>';</span><br>bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk
    </h1>
</body>
</html>

review0511 text-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-shadow</title>
    <style type="text/css">
        h1{
            text-shadow: 5px 5px 5px red;
        }
    </style>
</head>
<body>
    <h1>text-shadow!!!!!!!!!</h1>
</body>
</html>

review0511 word-break

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>word-break</title>
    <style type="text/css">
        h1 { 
            width: 800px; 
            margin: 10px auto; 
            background: #abcdef; 
        }
        h1:nth-child(1) { 
            word-break: normal; 
        }
        h1:nth-child(2) { 
            word-break: break-all; 
        }
        h1:nth-child(3) { 
            word-break: keep-all; 
        }
        h1:nth-child(4) { 
            word-break: normal; 
        }
        h1:nth-child(5) { 
            word-break: break-all; 
        }
        h1:nth-child(6) { 
            word-break: keep-all; 
        }
        h1 > span { 
            color: red; 
        }
    </style>
</head>
<body>
    <h1>
        <span>word-break: normal;</span><br>
        Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.
    </h1>
    <h1>
        <span>word-break: break-all;</span><br>
        Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.
    </h1>
    <h1>
        <span>word-break: keep-all;</span><br>
        Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.
    </h1>
    <h1>
        <span>word-break: normal;</span><br>
        将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>word-break: break-all;</span><br>
        将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。
    </h1>
    <h1>
        <span>word-break: keep-all;</span><br>
        将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。
    </h1>
</body>
</html>

review0511 word-wrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>word-wrap</title>
    <style type="text/css">
        h1 { 
            width: 800px; 
            margin: 10px auto; 
            background: #abcdef; 
        }
        h1:nth-child(1) { 
            word-wrap: normal; 
        }
        h1:nth-child(2) { 
            word-wrap: break-word; 
        }
        h1:nth-child(3) { 
            word-wrap: normal; 
        }
        h1:nth-child(4) { 
            word-wrap: break-word; }

        h1 > span { 
            color: red; 
        }
        </style>
    </head>
    <body>
        <h1>
            <span>word-wrap: normal;</span><br>
            bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk
        </h1>
        <h1>
            <span>word-wrap: break-word;</span><br>
            bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk
        </h1>
        <h1>
            <span>word-wrap: normal;</span><br>这个字是由100个字母组成的。就出现在爱尔兰作家乔埃斯(James Joyce 1882-1942)作品《芬尼根守灵夜》(Finnegans Wake)的扉页，象征代表亚当和夏娃。（http://www.bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk.com）
        </h1>
        <h1>
            <span>word-wrap: break-word;</span><br>这个字是由100个字母组成的。就出现在爱尔兰作家乔埃斯(James Joyce 1882-1942)作品《芬尼根守灵夜》(Finnegans Wake)的扉页，象征代表亚当和夏娃。（http://www.bababadalgharaghtakamminarronnkonnbronntonnerronntuonnthunntrovarrhounawnskawntoohoohoordenenthurnuk.com）
        </h1>
    </body>
    </html>