css設定英文字型間距?

Tags: 英文, 字型, 間距,

你知道css如何設定英文字型之間的間距嗎？讓我們一起來看一下吧。

css設定英文字型間距

方法/步驟

新建一個html頁面。如圖：

css設定英文字型間距

在html頁面上找到標籤，在這個標籤上新增段落

標籤，然後在p標籤上寫入一些英文語句。為了方便觀察與比較，我們寫三個一模一樣的

標籤，並在第二和第三個標籤中新增class類樣式。如圖：

css設定英文字型間距

在瀏覽器上檢視

標籤的效果，這時我們看到的是沒有設定字型距離的效果。如圖：

css設定英文字型間距

設定字型間距變大。

回到程式碼頁面找到標籤，在<title> 標籤後新增一個<style>標籤，並在<title>標籤裡設定第二個<p>標籤的樣式類：空格的間距是50px</p> <p>樣式程式碼：</p> <p><style type="text/css"></p> <p>.font-spacing{</p> <p>word-spacing: 50px;</p> <p>}</p> <p></style></p> <p>如圖：</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/3/3f/33fc16dbf47dddd96a33c83c0a4938e4_thumb.jpg" alt="css設定英文字型間距" title="css設定英文字型間距"></a><br></p> <p>使用瀏覽器開啟html頁面，我們會發現第二行的英文間距加大了。如圖：</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/2/df/2dfbdd315f71da4e2f2260f7b17dabd4_thumb.jpg" alt="css設定英文字型間距" title="css設定英文字型間距"></a><br></p> <p>設定字型間距變小。</p> <p>回到html程式碼頁面，在<style>標籤裡設定第三個<p>標籤的class類樣式為：空格間距縮小0.5em</p> <p>樣式程式碼：</p> <p>.font-spacing2{</p> <p>word-spacing: -0.5em;</p> <p>}</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/a/5b/a5b0d7679cd1d0975d28bb8f85aad440_thumb.jpg" alt="css設定英文字型間距" title="css設定英文字型間距"></a><br></p> <p>回到瀏覽器頁面，重新整理瀏覽器即可看到空格間距縮小了0.5em。如圖：</p> <p><a href="#" class="lightbox"><img src="http://img.wkgoto.com/upload/e/29/e29438dd00db55f611a3e3f8ecc05894_thumb.jpg" alt="css設定英文字型間距" title="css設定英文字型間距"></a><br></p> <p>html頁面所有程式碼：</p> <p><!DOCTYPE html></p> <p><html></p> <p><head></p> <p><meta charset="UTF-8"></p> <p><title>英文字型間距設定

how are you

how are you

how are you

css設定英文字型間距

相關問題答案

Have any Question?

Let us answer it!