CSS保健室｜用圖片來取代文字標題

前言

相信大家都知道標題在網頁及 SEO 的重要性，但如果客戶想要的是可愛體或草書這種網頁字型無法解決的需求，這時候又該怎麼辦呢？其實用 text-indent 的相撲比賽方式就可以解決了。

（ 圖片來源 ）

Step1. 製作出圖片檔

首先要先用平面設計軟體製作出一張圖（ 記得原始檔要留著啊！這樣以後客戶改字的話才不用從頭來過 ）。

Step2. 標題照樣打上去，然後用 CSS 背景圖片

HTML

<h1>jump</h1>

CSS

h1{
    background-image: url('img/jump.png');
    width: 150px; 
    height: 45px;
}

Step3. 最後把標題像比賽相撲一樣用力往外推

CSS

h1{
    background-image: url('img/jump.png');
    width: 150px; 
    height: 45px;
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
}

text-indent: 101%

強迫文字縮排至原本的區域外。

white-space: nowrap

規定段落中的文字不得換行，用於避免字數過多時自動換行導致閱讀效果變差。

overflow: hidden

將超出範圍的內容隱藏。

資料來源

Day05 「弟兄們，為了SEO！」 ─ 將 h1 圖片取代文字！