文章目錄

一、字體的使用

注意：如果字體是由多個單詞構成的，那麼必須加上引號

1.1定義字體 @font-face

<style>
    @font-face {
        /*  自定義字體的名次 */
        font-family: 'pengsir';
        /* 定義多個字體 當第一個字體不存在或不能識別時，使用第二個字體*/
        src: url('font/font.TTF'),
            url('font/freescpt.TTF');
    }
    span{
        font-family: pengsir;
    }
</style>
<body>
   <span>測試文本abc</span>
</body>

效果：

二、字體樣式

2.1 字重定義 font-weight

字重指字的粗細定義。取值範圍 normal | bold | bolder | lighter | 100 ~900。

400對應 normal,700對應 bold ，一般情況下使用 bold 或 normal 較多。

效果：

2.2 字號 font-size

字號用於控制字符的顯示大小，包括 xx-small | x-small | small | meidum | large | x-large | xx-large。
百分數
- 百分數是子元素相對於父元素的大小，如父元素是20px，子元素設置爲 200%即爲你元素的兩倍(40px)大小。
em
- em單位等同於百分數單位 (可以理解爲一個字的寬度)。

2.3 行高設置 line-height

這裏是1.5倍行高，em可以根據字的大小來自動調整行高，所以行高一般設置爲 em

<style>
    p{
        line-height: 1.5em;
    }
</style>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab 
        architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo
         quis autem, perferendis fugiat vitae asperiores.
    </p>
</body>

2.3 字體風格 font-style

italic 和 oblique 都是傾斜

<style>
    body>em{
        font-style: normal;
    }
    p:nth-of-type(1){
        line-height: 1.5em;
        font-style: italic;
    }
    p:nth-of-type(2){
        line-height: 1.5em;
        font-style:oblique;
    }
</style>
<body>
	<em>這是默認傾斜的字體</em>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non blanditiis ab architecto vel nulla cum, id laboriosam, ratione quo at repellendus maiores! Nemo quis autem, perferendis fugiat vitae asperiores.
    </p>
</body>

效果：

2.4 組合寫法 font

font 簡寫屬性在一個聲明中設置所有字體屬性。

可設置的屬性是（按順序）： “font-style font-variant font-weight font-size/line-height font-family”

font-size和font-family的值是必需的。如果缺少了其他值，默認值將被插入，如果有默認值的話。

2.5 大小寫轉換 font-variant or text-transform

font-variant:samll-caps 將小寫字母轉化爲大寫將大寫字母再放大和加粗
text-transform:capitalize 單詞首字母大寫
text-transform:lowercase 全部小寫
text-transform:uppercase 全部轉化爲大寫

    <style>
        p:nth-of-type(1) {
            font-variant: small-caps;
        }
        p:nth-of-type(2) {
            text-transform: capitalize;
        }
        p:nth-of-type(3) {
            text-transform:lowercase;
        }
        p:nth-of-type(4) {
            text-transform:uppercase;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur cum atque quia harum alias dolorem. Sequi</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto placeat nobis provident eveniet laboriosam</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quam cupiditate illo corrupti odit dolore vel unde</p>
</body>

效果：

2.6 文本線條控制 text-decoration:

值	描述
solid	默認值。線條將顯示爲單線。
double	線條將顯示爲雙線。
dotted	線條將顯示爲點狀線。
dashed	線條將顯示爲虛線。
wavy	線條將顯示爲波浪線。

不會讀？已經幫你填好了：百度翻譯

屬性定義及使用說明
text-decoration 屬性是以下三種屬性的簡寫：

text-decoration-line
text-decoration-color
text-decoration-style

<style>
	h3:nth-of-type(1){
		/*下劃線*/
        text-decoration: underline;
    }
    h3:nth-of-type(2){
    	/*上劃線*/
        text-decoration:overline;
    }
    h3:nth-of-type(3){
    	/*刪除線*/
        text-decoration:line-through;
    }

	/* 組合方式 */
    h1 {
        text-decoration: underline overline line-through dotted red;
    }
    h2 {
        text-decoration: underline overline wavy blue;
    }
</style>
<body>
    <h1>測試文本</h1>
    <h2>測試文本</h2>
    <h3>測試文本</h3>
    <h3>測試文本</h3>
    <h3>測試文本</h3>
</body>

效果：

2.7 文本陰影 text-shadow

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow屬性連接一個或更多的陰影文本。屬性是陰影，指定的每2或3個長度值和一個可選的顏色值用逗號分隔開來。已失時效的長度爲0。

<style>
     h3{
         text-shadow:rgba(255, 222, 12, .4) 5px 5px 1px,
                     rgba(0, 0, 255, 0.8) -5px -5px 1px;
     }
</style>
<body>
    <article>
        <h3>測試文本</h3>
    </article>
</body>

效果：

2.8 空白處理 pre or white-space

使用 white-space 控制文本空白顯示。

選項	說明
pre	保留文本中的所有空白，類似使用 pre 標籤
nowrap	禁止文本換行
pre-wrap	保留空白，保留換行符
pre-line	空白合併，保留換行符

<style>
    h3:nth-of-type(1) {
        white-space: pre;
    }
    h3:nth-of-type(2) {
        white-space: pre-line;
    }
    h3:nth-of-type(3) {
        white-space:pre-wrap;
    }
</style>
<body>
    <article>
        <h3>測試    
                 文本
        </h3>
        <h3>測試    
                 文本
        </h3>
        <h3>測試    
                 文本
        </h3>
        <pre>測試    
                 文本
        </pre>
    </article>
</body>

效果;

2.9 文本溢出處理 white-space overflow text-overflow

overflow屬性指定如果內容溢出一個元素的框，會發生什麼。

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。(會出現瀏覽器的橫向或者縱向滾動條)
hidden	內容會被修剪，並且其餘內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。

text-overflow text-overflow屬性指定當文本溢出包含它的元素，應該發生什麼。

值	描述
clip	修剪文本。
ellipsis	顯示省略符號來代表被修剪的文本。
string	使用給定的字符串來代表被修剪的文本。

<style>
    div:nth-of-type(1){
        width: 20vw;
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam voluptatum, cum placeat veniam consequatur eaque inventore nostrum ex, delectus omnis quibusdam illo voluptas quas sed explicabo nisi magni unde? Ullam.</div>
</body>

效果：

2.10 文本縮進與對齊

2.10.1 文本縮進

text-indent:2em文本縮進2個字符

2.10.2 水平對齊

text-align:center 文本水平居中

2.10.3 垂直對齊

參考：CSS vertical-align 屬性
vertical-align 屬性設置一個元素的垂直對齊方式。

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。
在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

實例：

<style>
    article h3{
        font-size: 30px;
        text-indent: 2em;
    }
    div img{
        vertical-align: middle;
    }
    article div div{
        display: inline-block;
        vertical-align: bottom;
    }
</style>
<body>
    <article>
        <h3>
            這是一段測試文本。這是一段測試文本,這是一段測試文本。
        </h3>
        <div>
            <img src="https://picsum.photos/200/200" alt="">
            <div>測試文本</div>
            Laboris dolore cillum exercitation duis aliqua culpa commodo amet eiusmod ullamco sint.
        </div>
    </article>
</body>

文中用到了 https://picsum.photos 這個網址，他可以隨機返回一張圖片。有興趣可以百度看看。
效果：

2.11 字符間距 letter-spacing | word-spacing

字符間距 letter-spacing

單詞間距 word-spacing

長單詞換行
word-wrap:break-word

<style>
    p:nth-of-type(1){
        letter-spacing: 15px;
    }
    p:nth-of-type(2){
        word-spacing: 20px;
    }
    p:nth-of-type(3){
		border: 1px solid black;
	    width: 200px;
    }
    p:nth-of-type(4){
        border: 1px solid black;
        width: 200px;
        /* 規定長單詞換行 */
        word-wrap: break-word;
    }
</style>
<body>
    <p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
    <p>Nisi et dolore veniam reprehenderit duis ea nisi velit.</p>
    <p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p>
    <!-- 長單詞換行 -->
    <p>Nisi et dolore veniamveryveryveryveryveryveryveryverylongword reprehenderit duis ea nisi velit.</p>
</body>

效果：

2.12 排版方式 writing-mode

參考：writing-mode 屬性

writing-mode:horizontal-tb 默認值，從上到下
默認值就不演示了，都一樣的

writing-mode: vertical-lr 垂直方向從左到右

writing-mode: vertical-rl 垂直方向從右到左

CSS3學習筆記-04-詳解各種文本修飾