iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 28

Day28--Bootstrap&CSS文字排版&樣式(6)

  • 對元素設置.font-weight-normal可以讓文字和符號以預設呈現。
<p class="p-1 border border-danger font-weight-normal">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

https://ithelp.ithome.com.tw/upload/images/20201013/20129568XrT3WHRm2A.png

  • 對元素設置.font-weight-bold可以讓文字和符號以粗體呈現。
<p class="p-1 border border-danger font-weight-bold">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

https://ithelp.ithome.com.tw/upload/images/20201013/201295686JKy8thqH5.png

  • 對元素設置.font-weight-light可以讓文字和符號以細體呈現。
<p class="p-1 border border-danger font-weight-light">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

https://ithelp.ithome.com.tw/upload/images/20201013/20129568vMN6sBNUUt.png

  • 對元素設置.font-weight-bolder可以呈現比父元素更粗的文字和符號。
<div class="font-weight-normal">
    <p class="p-1 border border-danger font-weight-bolder">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>   
</div>

https://ithelp.ithome.com.tw/upload/images/20201013/20129568CYFlUtZmh8.png

  • 對元素設置.font-weight-lighter可以呈現比父元素更細的文字和符號。
<div class="font-weight-bold">
    <p class="p-1 border border-danger font-weight-lighter">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>   
</div>

https://ithelp.ithome.com.tw/upload/images/20201013/20129568YHhmNw1GIZ.png

  • 對元素設置.font-italic可以讓文字和符號以斜體呈現。
<p class="p-1 border border-danger font-italic">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>

https://ithelp.ithome.com.tw/upload/images/20201013/201295685aoj6bhp0y.png


上一篇
Day27--Bootstrap&CSS文字排版&樣式(5)
下一篇
Day29--Bootstrap&CSS文字排版&樣式(7)
系列文
30天CSS&Bootstrap排版統整30

尚未有邦友留言

立即登入留言