css揭祕實戰技巧 - 字型排印[四]

全目錄

本系列文章，主要是圍繞css3屬性，實現我們常見的各種效果，這些效果都是我們實戰開發中經常可以用到的效果：

1. css揭祕實戰技巧- 背景與邊框 [一]
2. css揭祕實戰技巧- 形狀 [二]
3. css揭祕實戰技巧 - 視覺效果[三]
4. css揭祕實戰技巧 - 字型排印[四]
5. css揭祕實戰技巧 - 使用者體驗[五]
6. css揭祕實戰技巧 - 結構與佈局[六]
7. css揭祕實戰技巧 - 過渡與動畫[七]

前言

一：連字元斷行

1. 兩邊對其

text-align: justify;
複製程式碼

效果如下：

2. 連字元斷行

連字元用： $shy 去表示。 如果我們想使用連字元斷行，可以通過hyphens 去控制，

hyphens: none // 隱藏連字元
hyphens: manual //顯示連字元
hyphens: auto //自動
複製程式碼

程式碼如下：

<div>
    the onlu way to get rid of a temp &shy tation is to yield to it;
</div>
複製程式碼

width: 100px;
height: 100px;
border: 1px solid #ddd;
text-align: justify;
hyphens: manual;
複製程式碼

效果如下：

二：插入換行

在我們實際開發過程中，換行這種事情是經常需要的，可能大部分時候，直接在想換行的地方加一個"<br>"即可，這樣方案沒問題，但是每個換行的地方都要加一個br，可維護性會相對差一點, 那麼，是否有其他更好的方案呢？

實際上，有一個 Unicode 字元是專門代表換行符的:0x000A1。在 CSS 中， 這個字元可以寫作 "\000A"，或簡化為 "\A"。我們可以用它來作為 ::after 偽元素的內容，並將其新增到每個元素的尾部，

程式碼如下：

span::after {
    content: '\A';
}
複製程式碼

我們設定以後，發現並沒有生效，為什麼呢？這是因為換行符會與其相鄰的空白符進行合併，所以最後結果還是沒有換行，所以，接下來要做的就是，如何不讓換行符和空白符合並呢？ 答案就是：white-space: pre;

程式碼如下：

span::after {
    content: '\A';
    white-space: pre;
}
複製程式碼

三：文字行的斑馬條紋

說到斑馬條紋，我們第一時間想到的可能就是選擇器:nth-child(odd/even), 通過分別設定奇數行和偶數行不同樣式，但是這種方法是對多個不同的標籤去設定，例如ul下面有多個li，就可以這樣設定.

但是如果只是一個段落文字，那該如何設定斑馬條紋呢？

首先，我們看一下最終的效果：

方案一：切割段落，到不同的標籤上

將段落切成多段，然後分別放到多個標籤下，然後再對標籤使用nth-child設定樣式，但是，很顯然，這種方式太low了，怎麼切分成多個段落？而且又增加了這麼多新標籤，對效能也影響。

方案二：只有一個標籤

採用漸變去實現條紋背景，同時配合行高實現垂直居中。 程式碼如下：

//css
width: 300px;
line-height: 1.6em;
background-image: linear-gradient(to bottom, #ddd 50%, transparent 0);
background-size: 100% 3.2em;
background-origin: content-box;
複製程式碼

//html
<p>
    結對程式設計（英語：Pair programming）是一種敏捷軟體開發的方法，兩個程式設計師在一個計算機上共同工作。一個人輸入程式碼，而另一個人審查他輸入的每一行程式碼。
</p>
複製程式碼

四：調整 tab 的寬度

方案一：使用JSON.stringify(data, null, 4)

第三個引數控制縮緊大小

方案二：用使用新屬性tab-size去控制

tab-size: 4;
複製程式碼

五：自定義下劃線

1. 自帶下劃線

程式碼如下：

text-decoration: underline;
複製程式碼

效果如下：

但是，使用自帶的下劃線，我們無法設定下環線的顏色或者其他效果，這是，我們想到的就是使用邊框，陰影，甚至backgroud去模擬下劃線。

2. border實現

程式碼如下：

border-bottom: 1px solid #000;
line-height: 0.9em //讓邊框更貼近文字
複製程式碼

3. box-shadow實現

程式碼如下：

box-shadow: 0px 1px;
line-height: 0.9em; //讓邊框更貼近文字
複製程式碼

4. background實現

程式碼如下：

background: linear-gradient(green, green) no-repeat;
background-size: 100% 1px;
background-position: 0px 1em; //設定背景的起始位置
複製程式碼

5. css新特性搞定

也就是說，現在其實有新屬性是可以設定下劃線的效果的，

text-decoration-color 用於自定義下劃線或其他裝飾效果的顏色。
text-decoration-style 用於定義裝飾效果的風格(比如實線、虛線、波浪線等)。
text-decoration-skip 用於指定是否避讓空格、字母降部或其他物件。
text-underline-position 用於微調下劃線的具體擺放位置。
複製程式碼

當然，以上新特性可能部分瀏覽器還沒有到支援。

六：現實中的文字效果

1. 空心字型

實現原理：通過設定四個方向的偏移量， 然後 所有偏移量的效果組合在一起，就實現了類似邊框的效果。 程式碼如下：

width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 3px 3px red, -3px -3px red, -3px 3px red, 3px -3px red;
複製程式碼

2. 字型外發光效果

實現原理： 即設定文字的陰影效果即可。

程式碼如下：

width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 0px 0px 10px yellow;
複製程式碼

3. 文字凸起效果

實現原理：主要思路就是使用一長串累加的投影， 不設模糊並以 1px 的跨度逐漸錯開，使顏色逐漸變暗，然後在底部加一層強 烈模糊的暗投影，從而模擬完整的立體效果。

程式碼如下：

width: 300px;
height: 150px;
background: green;
color: #fff;
font-size: 80px;
text-align: center;
text-shadow: 0px 0px 2px hsl(0,0%,85%),
             0px 0px 4px hsl(0,0%,75%),
             0px 0px 6px hsl(0,0%,65%),
             0px 0px 8px hsl(0,0%,55%),
             0px 0px 10px hsl(0,0%,45%);
複製程式碼