CSS样式技巧：阴影、换行与字体的灵活应用-优快云博客

本文链接：https://blog.youkuaiyun.com/lulu_jiang/article/details/7801239

給文字添加陰影 text-shadow屬性

text-shadow : length length length color;

前3個length分別指：陰影離開文字的橫向距離，陰影離開文字的縱向距離，陰影模糊半徑(可不指定，則不模糊，值為0不模糊)

color指陰影顏色(可不指定，則使用字體顏色)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        div
        {
            /*可指定多個陰影*/
            text-shadow:5px 5px 1px red,
                        15px 15px 1px black,
                        25px 25px 1px green;
            background-image:url(test.png);
            height:50px;
            color:blue;
        }
        </style>
    </head>
    <body>
        <div>你好</div>
    </body>
</html>

文本自動換行 word-break屬性

1.word-break:normal;

使用瀏覽器默認換行規則

2.word-break:keep-all;

只能在半角空格或連字符處換行

3.word-break:break-all;

允許在單詞內換行

長單詞與URL地址自動換行 word-wrap屬性

1.word-wrap:normal;

使用瀏覽器默認處理

2.word-wrap:break-word;

可在長單詞或URL地址內進行換行

使用服務器端字體 Web Font與@font-face屬性

CSS3之前，頁面文字所使用字體必須已在客戶端中被安裝才可正常顯示，現在新增Web Fonts功能，可使網頁使用服務器端字體。

@font-face屬性中，可指定以下值：

1.font-family：設置字體系列名稱

2.font-style：設置字體樣式

3.font-variant：設置字體大小寫

4.font-weight：設置字體粗細

5.font-stretch：設置字體是否伸縮變形

6.font-size：設置字體大小寫

7.src：設置字體文件路徑

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        @font-face{
            /* 用WebFont來聲明使用服務器端字體 */
            font-family:myWebFont;
            /* 用src屬性指定服務器端字體文件所在路徑，format屬性聲明字體類型 */
            /* 目前支持opentype(後綴.otf)，truetype(後綴.ttf) */
            src:url('SIMYOU.TTF') format("truetype");   
        }
        @font-face{
            font-family:myLocalFont;
            /* 使用客戶端本地字體 */
            src:local('Arial');   
        }
        @font-face{
            font-family:myLocalWebFont;
            /* 先使用客戶端字體，無此字體，再使用服務器端字體 */
            src:local('66'),
                url('SIMYOU.TTF') format("truetype"); );   
        }
        h1{
            /* 使用WebFont字體(服務器端字體) */
            font-family:myWebFont;
            font-size:60px;
        }
        h1#italic{font-style:italic;}
        h1#local{font-family:myLocalFont;}
        h1#localWeb{font-family:myLocalWebFont}
        </style>
    </head>
    <body>
        <h1>哈羅</h1>
        <h1 id="italic">哈羅</h1>
        <h1 id="local">哈羅</h1>
        <h1 id="localWeb">哈羅</h1>
    </body>
</html>

修改字體種類而保持字體尺寸不變 font-size-adjust屬性

字體不同可能會導致字體大小不同，CSS3增加此屬性，可在保持字體大小不變的情況下改變字體種類

font-size-adjust:aspect;

aspect是每個字體種類都有的比例值，可通過微調達到滿意結果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        #div1{font-size:14px;font-family:Comic Sans MS;font-size-adjust:0.54;}
        </style>
    </head>
    <body>
        <div id="div1">
        It is fine today.Never change your plans because of the weather.
        </div>
    </body>
</html>

文字與字體相關樣式