讓網頁文字使用各種底線圖案__(2) 找出行高的簡易方法

一、找出行高值的困難性

「上一篇」製作底線圖案的一個重要步驟為找出「行高」line-height 的像素(px) 值，如此底線圖案才能正常顯示。不過經由上一篇【留言 #04】、【留言 #05】的提問，才赫然發現這個 line-height 的 px 值似乎沒這麼好找。

首先不是每個 BSP 平台都能檢查後台範本內容，有的部落格只能藉由瀏覽器提供的開發人員工具，而開發人員工具的操作步驟說不定得發上一篇長文才能講得清楚。而最糟糕的是，用開發人員工具查出來的 line-height 數值，如果是 px 值當然就沒問題，但每個 BSP 平台提供的範本寫法都不同，上一篇【留言 #05】廣告小妹的範本的 line-height 數值為 "180%"，而我查了自己的範本，line-height 竟然是 "1.4"，這是代表 1.4em(預設文字大小的 1.4倍)的意思。這下可好，真的要發文把所有狀況都概括進去可能要連載了。


二、找出行高的簡易方法

靈光一閃想到平常調整部落格版面的技巧──利用圖片編輯軟體調整 px 值，剛好可以套用到這個任務上，以下就來看實作的步驟。

1. 確定瀏覽器縮放比例：

首先用瀏覽器打開網頁，並確定目前的縮放比例是 100%，這樣截出來的圖才能是 1：1 的大小。下圖為使用 Chrome 確認縮放比例的畫面，其他瀏覽器請自行尋找縮放比例的選項。




2. 用滑鼠選取要使用底線圖案的文字區塊：

如果是本文區要使用底線，那麼就隨便在本文區用滑鼠標示幾個字；如果是標題想要使用底線，那麼就對著標題標示幾個字，如下面兩張圖所示──






3. 截圖：

按下 print screen 鍵後，複製到圖片編輯軟體、貼上。由於在 1:1 的比例下，標示區看起來太小，於是將圖片放大後，再用滑鼠把文字標示區的上下兩端選取起來，高度不要超過也不要少選，如下面兩張圖所示──





以上兩圖是我用 PhotoImpact 操作的效果，用滑鼠選的區域，會顯示選取區高度的像素(px)值，我們等於間接從這裡得到了行高的 px 值──第一個本文區的的行高便可視為 18px，第二個標題區的行高便可視為 24px。但如果不是使用 PhotoImpact 的話，可能得自行研究一下如何找出滑鼠選取區的高度資訊。

好了，操作順利的話，到此就找出 line-hight 的 px 值了，不過為了相容各個瀏覽器，還有下面一點要注意。


三、各大瀏覽器的行高誤差

根據「這個網頁」，各大瀏覽器在 line-height 值為偶數時表現一致，但數值為單數時，在每行的上端或下端會有 1px 的誤差。

為了解決這 1px 在不同瀏覽器間的顯示，在製作底線圖案時除了「上一篇」的要點之外，理論上在底線透明圖的最下方留 1px 的空間即可，如下面這張圖所示──



因為我的行高值為偶數，所以上面提的這一點 "理論" 就沒有測試了，如果還是會出問題的話麻煩再提出了。

CSS 技巧相關文章：