2012年9月29日

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

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 技巧相關文章:

10 則留言:

  1. 一直想要在文章中加入之前你分享的底線功能,
    結果發現沒有重點可標...(笑
    等想到深度(?內容就來用!!

    最後,祝中秋佳節快樂=D

    回覆刪除
  2. <4225689658804435131>(以上內容請勿刪除,從括號之後開始留言)
    Thank for your greeting~~也祝你月圓人團圓~~

    底線功能嘛~你謙虛了, "日常生活" 類就可以用了,呵呵 ^^

    回覆刪除
  3. 這篇有些畫面好熟悉XD
    真的太感謝了~明天來研究看看不同字體大小的行高!
    最後是快結束的中秋快樂囉^^

    回覆刪除
  4. <6054027875739872538>(以上內容請勿刪除,從括號之後開始留言)
    tks, I'm happy~關於本文引用的圖片,來源出自網路,其著作權皆屬原作者所有,如有侵權請來信告知,會將內容即刻移除.....XD

    回覆刪除
  5. 哇咧~~ 好仔細的解說 XD
    我我我... 這就去找找看的line-height是多少 :/

    回覆刪除
  6. <2722463005344072364>(以上內容請勿刪除,從括號之後開始留言)
    因為是出乎意料的難題啊~能簡單回答的話就可以留言回覆了..XD

    回覆刪除
  7. 哈~這篇之前就想試看看了,就像1樓所言:真沒啥重點可標記
    再加上語法實不好就一直遲遲不敢用,昨天用了第一篇,一試就出來,底線標出來真的超感動的,而且好可愛>▽<
    嗯,如果有行高上的問題再來參考這一篇,目前第一篇就夠用了。

    回覆刪除
  8. <2814482683294870671>(以上內容請勿刪除,從括號之後開始留言)
    語法不熟沒關係,本站的 hack、小工具,多半只要複製貼上就能用了~~很高興你安裝成功了,去你家看了第一篇文章,倒是沒找到用底線的地方,有機會再參觀你的效果了。

    回覆刪除
  9. 文章昨天還沒編輯完。
    http://leoyomi.blogspot.tw/2012/11/child-clothing-x1f6e3p.html
    昨天看到這個底線效果時,一整個高興到不行XDDD
    另……WFU的頭像是模三的?

    回覆刪除
  10. <6410233368668060677>(以上內容請勿刪除,從括號之後開始留言)
    原來我太早去看了~~
    果然是行家, 一眼就認出是sim3, 當初頭像找好久, 搜尋到的那個網頁, 都認不出是哪一國文字..XD
    BTW, 你的文章網址命名好特殊(x1f6e3p) ^^

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。