Endless TACOJOHN

首字放大，在出版業，無論是雜誌、文案或是海報都很常見。

基本上，首字放大可區分為兩種，一種是"Drop Caps"，就是首字放大，其他的文字會類似文繞圖的方式呈現。另一種稱之為"First Letter Big"，首字一樣放大，但是跟我們平常單獨調整文字的大小一樣，不會有文繞圖的效果。各有各的美，只有使用的時機不同而已。

上面指的是呈現的方式，再來依編寫(coding)的方式，我會介紹CSS Inline Style、CSS Style Sheet以及CSS First-Letter Pseudo等三種方式。依常用程度來區分Inline Style的話，如果你的文章不常用這種首字放大的效果的話，Inline Style就蠻方便的；如果你還蠻常用的，但不是每篇文章都用的話，那利用Style Sheet比較適合；如果你是重度的使用者，每篇文章都要用的話，那First-Letter Pseudo會讓你寫起文章變得更EASY囉!!

下面的範例，我會先介紹Drop Caps，把三種不同的編寫方式做個簡單的介紹；再介紹的三種不同編寫方式。

• 這是第一種呈現方式，即Drop Caps。
  我們希望首字放大約五行的話，就大約算一下，把字型大小(font-size)設定為100px，行高(line-height)設為80px。
  行高的設定會影響到該段落其他文字落在首字右方的斷行數。
  下面我們會就三種的編寫方式做分別的說明。
  
  
  
  
  1. 使用Inline Style，語法如下：
     <span style="float:left;color:chocolate;font-size:100px;line-height:80px;padding-top:2px;font-family: 標楷體, Georgia;">這</span>是第一種，直接在本文使用inline style。……

  
  
  2. 使用Style Sheet，語法如下：
     先加入下面這一段CSS
     .dropcap {
  .float:left;
  color:chocolate;
  font-size:100px;
  line-height:80px;
  padding-top:2px;
  font-family: 標楷體, Georgia;
}
     再來，當要使用時，只要在首字部份加上span、class等tag即可，如下：
     <span class="dropcap">這</span>就是利用Style Sheet實現Drop Caps
  
  
  3. 使用First-Letter Pseudo的語法如下：
     一樣，先加入下面這一段CSS
     <style type="text/css">
firstletter:first-letter {
  font-family: 標楷體, Georgia;
  color:chocolate;
  font-size:100px;
  line-height:80px;
  padding-top:2px;
  float:left;
}
</style>
     使用時，直接將整個文章內容用段落tag包起來即可，不用針對首字做tagging，如下
     <p class="firstletter">這一段利用First-Letter Pseudo來實現，不需要針對首字做個別的處理即可達成。</p>


• 再來是First Letter Big，看出跟上面的Drop Caps的差異了嗎??這種單純只會對首字做放大的效果，而不會有文繞圖，也就是首字跟其他文字的水平對齊是bottom。
  
  
  
  
  1. 使用Inline Style，語法如下：
     <span style="font-family:標楷體, Georgia,;color:chocolate;font-size:100px;font-weight:normal;line-height:80%;letter-spacing:-6px;">這</span>是第一種，直接在本文使用inline style。……

  
  
  2. 使用Style Sheet，語法如下：
     先加入一段CSS如下：
     .firstbigletter {
  font-family: 標楷體, Georgia,;
  color:chocolate;
  font-size:100px;
  font-weight:normal;
  line-height:80%;
  letter-spacing:-6px;
}
     再來，當要使用時，只要在首字部份加上span、class等tag即可，如下：
     <span class="dropcap">這</span>就是利用Style Sheet實現First Letter Big效果。
  
  
  3. 使用First-Letter Pseudo的語法如下：
     一樣，加入下面這一段CSS
     <style type="text/css">
firstletter:first-letter {
  font-family: 標楷體, Georgia,;
  color:chocolate;
  font-size:100px;
  font-weight:normal;
  line-height:80%;
  letter-spacing:-6px;
}
</style>
     使用時，直接將整個文章內容用段落tag包起來即可，不用針對首字做tagging，如下
     <p class="firstletter">這一段利用First-Letter Pseudo來實現，不需要針對首字做個別的處理即可達成。</p>