2022年4月11日

不用買字型,用 CSS 做出專業的縷空文字+外框

不用買字型,用 CSS 做出專業的縷空文字+外框

Wayne Fu 0 A+
不用買字型,用 CSS 做出專業的縷空文字+外框最近接到一個需求,製作醫學疾病風險自我檢測頁面,客戶提供的設計圖質感不錯,只不過有設計感的畫面在製作 RWD 效果時,難度會提高很多。 其中一個部分需要使用高超的 CSS 技巧「縷空文字+外框」,這樣的效果無法用簡單的 CSS 語法做出來,原設計圖版面如下(紅框標示的部分): 不用買字型,用 CSS 做出專業的縷空文字+外框 那麼讀者可以先思考一下,如果使用純 CSS 的話,要怎麼做出這個「文字內部粗體縷空 + 文字外框陰影」效果?

一、文字外框 text-stroke

一開始 Google 到文字外框的效果可用 CSS 語法 -webkit-text-stroke 做到,教學範例可參考這篇「透過CSS3屬性text-stroke 實現縷空文字邊框效果」。 1. 效果1 -webkit-text-stroke: 1px #fff; 先來測試基本效果,以上 CSS 語法先測試 1px 外框,效果如下:
WFU BLOG
文字縷空外框範例
  • 英文字體效果還可以
  • 中文字不太行,看起來 text-stroke 會吃掉字體寬度
2. 效果2 -webkit-text-stroke: 1px #fff; font-weight: bold; 因為 text-stroke 會佔據 font-size 寬度,所以試著把字體加粗:
WFU BLOG
文字縷空外框範例
這樣子看起來好多了。 3. 效果3 -webkit-text-stroke: 2px #fff; font-weight: bold; 但是外框要粗一點效果比較好,所以語法改 2px外框:
WFU BLOG
文字縷空外框範例
中文字又不行了,text-stroke 吃掉字體寬度的情況,是必須解決的大問題。

二、文字陰影 text shadow

另一個製作文字外框的技巧,是使用 CSS 語法 text shadow,教學範例可參考這個討論串「Font outline using only CSS」。 text-shadow: 0 0 5px #5b947f, 0 0 5px #5b947f, 0 0 5px #5b947f, 0 0 5px #5b947f; font-weight: bold; 利用以上語法測試效果,將字體加粗並設定了 5px 外框陰影,效果如下:
WFU BLOG
文字縷空外框範例
  • 看起來效果很不錯,無論字體多大多寬,text shadow 都不會侵佔字體空間
  • 只可惜這效果跟客戶提供的設計圖稍稍不太一樣

三、完美組合語法

還好找到這篇教學「如何利用 CSS 製作完美的文字外框」。作者製作的原理整理如下:
  • 製作兩層一模一樣的文字內容,位置重疊
  • 上層為原本的文字,會遮蓋下層
  • 下層利用 text-stroke 做出更大面積的文字,自然形成外框效果
作者的這個巧思,完美解決了 text-stroke 無法用於粗體的困境,真的是最佳解。 但可惜的是,Blogger 直接套用其語法時,無法顯示出效果。這代表 Blogger 範本跟此作者使用的 CSS 環境有些微差異,所以我重新整理出可以用於 Blogger 環境的語法。

四、Blogger 實作技巧

以下提供範例程式碼: <div class="stroke" data-stroke="WFU BLOG">WFU BLOG</div> <div class="stroke" data-stroke="文字縷空外框範例">文字縷空外框範例</div> <style> .stroke {position: relative; color: #fff; font-size: 2rem; z-index: 10; background: #A7CFA2; text-align: center; padding: 5px; letter-spacing: 10px; } .stroke:before {position: absolute; z-index: -1; -webkit-text-stroke: 5px #5b947f; content: attr(data-stroke); } </style> 下面可看到以上 CSS 的效果,總算比較接近客戶的設計圖了:
WFU BLOG
文字縷空外框範例
更多 CSS 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP