第七十二節，文本樣式

文本樣式

 

學習要點：
1.字體總彙
2.字體設置
3.Web字體

本章主要探討HTML5中CSS文本樣式，經過文本樣式的設置，更改字體的大小、樣式以及文本的方位。

 

一．字體總彙
本節課，咱們重點了解一下CSS文本樣式中字體的一些設置方法，樣式表以下：

        屬性名                         說明                          　　　　　　　　CSS版本

        font-size      　　   　　設置字體的大小                        　　　　1

       font-variant 　　 　　    設置英文字體是否轉換爲小型大寫             1

        font-style     　　  　　 設置字體是否傾斜                                 1

       font-weight     　　　　  設置字體是否加粗                                1

       font-family     　　　　   設置font字體                                   　1

           font        　　　　　　設置字體樣式複合寫法                           1 ~ 2

        @font-face     　　　　 設置Web字體                                      3

 

二．字體設置
咱們能夠經過CSS文本樣式來修改字體的大小、樣式以及形態。

 

font-size 設置字體大小

                值                                 說明

             xx-small　　　　　　　　　 設置字體大小。每一個值從小到大的固定值

             x-small

              small

              medium

              large

             x-large

          　xx-large                           設置字體相對於父元素字體的大小

             smaller             

             larger

             數字+px               　　　　   使用CSS像素長度設置字體大小

             數字+%               　　　　    使用相對於父元素字體的百分比大小

 

 設置字體大小。每一個值從小到大的固定值

/*從小到大的固定值*/
.a{
    font-size: xx-small;
}
.b{
    font-size: x-small;
}
.c{
    font-size: small;
}
.d{
    font-size: medium;
}
.e{
    font-size: large;
}
.f{
    font-size: x-large;
}

<p class="a">這是一段文本</p>
<p class="b">這是一段文本</p>
<p class="c">這是一段文本</p>
<p class="d">這是一段文本</p>
<p class="e">這是一段文本</p>
<p class="f">這是一段文本</p>

設置字體相對於父元素字體的大小

/*設置字體相對於父元素字體的大小*/
.a{
    font-size:xx-large;
}
.b{
    font-size:smaller;
}
.c{
    font-size:larger;
}

<p class="a">這是一段文本</p>
<p class="b">這是一段文本</p>
<p class="c">這是一段文本</p>

使用CSS像素長度設置字體大小

 

/*使用CSS像素長度設置字體大小*/
p {
    font-size: 50px;
}

<p>這是一段文本</p>
<p>這是一段文本</p>
<p>這是一段文本</p>

 

使用相對於父元素字體的百分比大小【推薦】

/*使用相對於父元素字體的百分比大小*/
p {
    font-size:200%;
}

<p>這是一段文本</p>
<p>這是一段文本</p>
<p>這是一段文本</p>

 

font-variant 設置英文字體是否轉換爲小型大寫字母顯示

           值                                     說明

           normal              　　　　表示若是以小型大寫狀態，讓它恢復小寫狀態。

         small-caps            　　    讓小寫字母以小型大寫字母顯示。

p {
    font-variant: small-caps;
}

<p>這是一段文本html</p>

 

font-style設置字體是否傾斜。

                 值                                 說明

              normal        　　　　　　表示讓傾斜狀態恢復到正常狀態。

              italic           　　　　　　表示使用斜體。

             oblique           　　　　   表示讓文字傾斜。區別在沒有斜體時使用。

.a {
    font-style: italic;
}
.b{
    font-style: oblique;
}

<p class="a">這是一段文本html</p>
<p class="b">這是一段文本</p>

 

font-weight 設置字體是否加粗。

                值                                 說明

              normal           　　　　　　表示讓加粗的字體恢復正常。

               bold            　　　　　　  粗體

              bolder           　　　　　　 更粗的字體

             lighter           　　　　　　  輕細的字體

       100 ~ 900之間的數字  　　　　  600及以後是加粗，以前不加粗

在目前計算機和瀏覽器顯示中，只有bold加粗，其餘更粗更細，目前體現不出來。

.a {
    font-weight: bold;
}
.b{
    font-weight: bolder;
}
.c{
    font-weight: lighter;
}
.d{
    font-weight: 700;
}

<p class="a">這是一段文本html</p>
<p class="b">這是一段文本</p>
<p class="c">這是一段文本</p>
<p class="d">這是一段文本</p>

 

font-family使用指定字體名稱。這裏使用的字體是瀏覽者系統的字體。有時爲了兼容不少瀏覽者系統的字體，能夠作幾個後備字體。 

p {
    font-family:楷體,微軟雅黑,宋體;
}

<p>這是一段文本</p>

font字體設置簡寫組合方式。格式以下：[是否傾斜|是否加粗|是否轉小型大寫]字體大小 字體名稱；

p {
    font:50px 楷體 ;
}

<p>這是一段文本</p>

 

三．Web字體，也就是服務器端字體
雖然說能夠經過備用字體來解決用戶端字體缺失問題，但終究用戶體驗很差，且不必定備用字體全部用戶都安裝了。因此，如今CSS提供了Web字體，也就是服務器端字體。

 咱們能夠將字體下載放到html工程目錄來使用

@font-face服務器提供字體

@font-face {
    font-family: abc; /*給字體一個名稱*/
    src: url('BrushScriptStd.otf'); /*鏈接字體文件路徑*/
}
p{
    font-family: abc;
    font-size: 50px;
}

<p>這是一段html文本</p>

 

文本內容設置總彙

CSS文本樣式中文本內容的一些設置方法，樣式表以下：

            屬性名                         　　　　說明                  　　　　　　　　  　CSS版本

       text-decoration  　　　　　　　　   裝飾文本出現各類劃線。                    1

        text-transform     　　　　　　     將英文文本轉換大小寫。                     1

         text-shadow      　　　　　　　　 給文本添加陰影                               3

          text-align       　　　　　　　　   設置文本對齊方式                             1,3

         white-space       　　　　　　　　 排版中的空白處理方式                       1

        letter-spacing     　　　　　　　　 設置字母之間的間距                          1

         word-spacing      　　　　　　　　設置單詞之間的間距                          1

         line-height       　　　　　　　　   設置行高                                   　  1

          word-wrap        　　　　　　　　控制段詞                                   　   3

         text-indent       　　　　　　　　 設置文本首行的縮進                           1

 

文本內容設置

text-decoration設置文本出現下劃線。屬性值以下表

              　值                                 　說明

               none            　　　　　　  讓自己有劃線裝飾的文本取消掉

            underline          　　　　　　 讓文本的底部出現一條下劃線

             overline         　　　　　　   讓文本的頭部出現一條上劃線

           line-through        　　　　　　讓文本的中部出現一條刪除劃線

              blink            　　　　　　　 讓文本進行閃爍，基本不支持了

.a{
    text-decoration: underline;
}
.b{
    text-decoration: overline;
}
.c{
    text-decoration: line-through;
}
.d{
    text-decoration: blink;
}

<p class="a">這是一段文本</p>
<p class="b">這是一段文本</p>
<p class="c">這是一段文本</p>
<p class="d">這是一段文本</p>

 

text-transform 設置英文文本轉換爲大小寫。 

                 值                                   說明

               none            　　　　　　  將已被轉換大小寫的值恢復到默認狀態

            capitalize         　　　　　　  將英文單詞首字母大寫

            uppercase          　　　　　  將英文轉換爲大寫字母

            lowercase         　　　　　   將英文轉換爲小寫字母

.a{
    text-transform: capitalize;
}
.b{
    text-transform: uppercase;
}
.c{
    text-transform: lowercase;
}

<p class="a">gyfygegff</p>
<p class="b">kfklwfgiogvik</p>
<p class="c">GFHPOIGHWEAP8YG</p>

 

text-shadow 解釋：給文本添加陰影。其中四個值，第一個值：水平偏移；第二個值：垂直偏移；第三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）。 

.a{
    text-shadow :5px 5px 3px #ff272d;
}

<p class="a">gyfygegff</p>

 

text-align指定文本的對齊方式

                值                                 說明

               left            　　　　        靠左對齊，默認

              right           　　　　　　  靠右對齊

              center          　　　　　　 居中對齊

           　justify              　　　　   內容兩端對齊，就是文本內容多的時候，保證兩端都是對齊的

              start               　　　　    讓文本處於開始的邊界

              end               　　　　　　讓文本處於結束的邊界

start和end屬於CSS3新增的功能，但目前IE和Opera還沒有支持。

.a{
    text-align: left;
}
.b{
    text-align: right;
}
.c{
    text-align: center;
}
.d{
    text-align: justify;
}

<p class="a">這是一段文本</p>
<p class="b">這是一段文本</p>
<p class="c">這是一段文本</p>
<p class="d">簡介：當梁宇方決意不出席鉑爾曼酒店十五週年慶酒會的時候，他的父親，也是酒店董事長的梁澤，以及總經理梁宇青，正殷殷期盼着可以在這個酒會上正式將他介紹出來。無意接班的宇方居然藏身在馬場和分別六年的愛馬Sky馳騁草原。宇青的忽然現身馬場令他無所遁行，就這樣被壓回了酒店準備亮相。但宇方仍不甘示弱，仍乘機逃跑… 小歌星杜允兒來到酒店接週年慶的暖場演唱，向天微責無旁貸同行來幫忙，兩人倉皇找着</p>

 

white-space 處理空白排版方式。

值                      說明

normal              默認值，空白符被壓縮，文本自動換行，也就是不管多少個空格會被壓縮顯示一個空格，文本遇到擠壓時自動換行

nowrap             空白符被壓縮，文本不換行，也就是不管多少個空格會被壓縮顯示一個空格，文本遇到擠壓時不自動換行

pre               　 空白符被保留，遇到換行符則換行，也就是有多少空格就顯示多少空格，只有回車換行時才換行

pre-line            空白符被壓縮，文本會在排滿或遇換行符換行，不管多少個空格會被壓縮顯示一個空格，文本會在排滿或遇回車換行

pre-wrap          空白符被保留，文本會在排滿或遇換行符換行，也就是有多少空格就顯示多少空格，文本會在排滿或遇回車換行

.a{
    white-space: normal;
}
.b{
    white-space: pre;
}
.c{
    white-space: pre-line;
}
.d{
    white-space: pre-wrap;
}

<p class="a">這        是一段文本</p>
<p class="b">這        是一段文本</p>
<p class="c">這        是一段文本</p>
<p class="d">這        是一段文本</p>

 

letter-spacing設置文本之間的間距

          　　值                  說明

            normal              設置默認間距

            長度值                好比：「數字」+「px」

p{
    letter-spacing: 50px;
}

<p>這是一段文本</p>
<p>這是一段文本</p>
<p>這是一段文本</p>
<p>這是一段文本</p>

 

word-spacing設置英文單子之間的間距

                值                     說明

            normal              設置默認間距

            長度值                好比：「數字」+「px」

p{
    word-spacing: 50px;
}

<p>dislike  vt.consider unpleasant; not like </p>

 

line-height設置段落行高

               　值                           說明

                normal                    設置默認間距

                長度值                      好比：「數字」+「px」

                 數值                        好比：1,2,3

                 %                     　  好比：200%

p{
    line-height: 1px;
}

<p>這是一段文本</p>
<p>這是一段文本</p>
<p>這是一段文本</p>

 

word-wrap讓過長的英文單詞斷開

                   值                        說明

                normal                   單詞不斷開

            break-word                斷開單詞

 

text-indent設置文本首行的縮進

                值                           說明

               normal                    設置默認間距

               長度值                      好比：「數字」+「px」

p{
    text-indent: 50px;
}

<p>簡介：當梁宇方決意不出席鉑爾曼酒店十五週年慶酒會的時候，他的父親，也是酒店董事長的梁澤，以及總經理梁宇青，正殷殷期盼着可以在這個酒會上正式將他介紹出來。無意接班的宇方居然藏身在馬場和分別六年的愛馬Sky馳騁草原。宇青的忽然現身馬場令他無所遁行，就這樣被壓回了酒店準備亮相。但宇方仍不甘示弱，仍乘機逃跑… 小歌星杜允兒來到酒店接週年慶的暖場演唱，向天微責無旁貸同行來幫忙，兩人倉皇找着宴</p>