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

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

一、文字外框 text-stroke

一開始 Google 到文字外框的效果可用 CSS 語法 -webkit-text-stroke做到，教學範例可參考這篇「透過CSS3屬性text-stroke 實現縷空文字邊框效果」。 1. 效果1-webkit-text-stroke: 1px #fff;先來測試基本效果，以上 CSS 語法先測試 1px 外框，效果如下：

• 英文字體效果還可以
• 中文字不太行，看起來 text-stroke 會吃掉字體寬度

2. 效果2-webkit-text-stroke: 1px #fff; font-weight: bold;因為 text-stroke 會佔據 font-size 寬度，所以試著把字體加粗： 這樣子看起來好多了。 3. 效果3-webkit-text-stroke: 2px #fff; font-weight: bold;但是外框要粗一點效果比較好，所以語法改 2px外框： 中文字又不行了，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 外框陰影，效果如下：

• 看起來效果很不錯，無論字體多大多寬，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 的效果，總算比較接近客戶的設計圖了：