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%);
複製代碼