前言
相信大家都知道標題在網頁及 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
將超出範圍的內容隱藏。