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


Posted by itiswonderfall on 2022-05-29

前言

相信大家都知道標題在網頁及 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 圖片取代文字!


#css #css保健室 #title #background-image #text-indent #white-space #overflow







Related Posts

讀書筆記-版本控制使用Git: 合併

讀書筆記-版本控制使用Git: 合併

AI輔導室|在Illustrator中尋找PANTONE色

AI輔導室|在Illustrator中尋找PANTONE色

我要成為前端工程師的學習筆記:HTML & CSS 篇 - CSS Reset、display Day5

我要成為前端工程師的學習筆記:HTML & CSS 篇 - CSS Reset、display Day5


Comments