2012年9月1日 星期六

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

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

Wayne Fu 0 A+

(Pic from: ASE Buzz-Picasa,psdzzle.com)
一、找出行高值的困難性

上一篇」製作底線圖案的一個重要步驟為找出「行高」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 技巧相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP