一、找出行高值的困難性
「上一篇」製作底線圖案的一個重要步驟為找出「行高」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 技巧相關文章:
一直想要在文章中加入之前你分享的底線功能,
回覆刪除結果發現沒有重點可標...(笑
等想到深度(?內容就來用!!
最後,祝中秋佳節快樂=D
<4225689658804435131>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除Thank for your greeting~~也祝你月圓人團圓~~
底線功能嘛~你謙虛了, "日常生活" 類就可以用了,呵呵 ^^
這篇有些畫面好熟悉XD
回覆刪除真的太感謝了~明天來研究看看不同字體大小的行高!
最後是快結束的中秋快樂囉^^
<6054027875739872538>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除tks, I'm happy~關於本文引用的圖片,來源出自網路,其著作權皆屬原作者所有,如有侵權請來信告知,會將內容即刻移除.....XD
哇咧~~ 好仔細的解說 XD
回覆刪除我我我... 這就去找找看的line-height是多少 :/
<2722463005344072364>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除因為是出乎意料的難題啊~能簡單回答的話就可以留言回覆了..XD
哈~這篇之前就想試看看了,就像1樓所言:真沒啥重點可標記
回覆刪除再加上語法實不好就一直遲遲不敢用,昨天用了第一篇,一試就出來,底線標出來真的超感動的,而且好可愛>▽<
嗯,如果有行高上的問題再來參考這一篇,目前第一篇就夠用了。
<2814482683294870671>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除語法不熟沒關係,本站的 hack、小工具,多半只要複製貼上就能用了~~很高興你安裝成功了,去你家看了第一篇文章,倒是沒找到用底線的地方,有機會再參觀你的效果了。
文章昨天還沒編輯完。
回覆刪除http://leoyomi.blogspot.tw/2012/11/child-clothing-x1f6e3p.html
昨天看到這個底線效果時,一整個高興到不行XDDD
另……WFU的頭像是模三的?
<6410233368668060677>(以上內容請勿刪除,從括號之後開始留言)
回覆刪除原來我太早去看了~~
果然是行家, 一眼就認出是sim3, 當初頭像找好久, 搜尋到的那個網頁, 都認不出是哪一國文字..XD
BTW, 你的文章網址命名好特殊(x1f6e3p) ^^