Demo : https://www.lenlop123.com/2020/09/11-font-family-font-size-font-style.html
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjbtdKe7paesfbGyT-yxVFnTi8IxASp7bVfEbmuTgzlqHxryF4ICj3CStEK5qHmA10cz9rffne0szheJwNHuskZMGjy7MoPkARKX0pFMiIU-II2Wzu3qP99JM9Hy1bL2nU3AlIduzF4Cdg97o4MW6NWmay1UapCWapctfNOfm5JSg7ZQ8qj5q6oELO/s1600/css%20font%20family.jpg)
<style>
p.serif {font-family: "Times New Roman", Times, serif;}
p.sansserif {font-family: Helvetica, Arial, sans-serif;}
p.monospace {font-family: "Courier New", Courier, monospace;}
p.cursive {font-family: Florence, cursive;}
p.fantasy {font-family: Blippo, fantasy;}
</style>
<p class="serif">This is a paragraph shown in serif font.</p>
<p class="sansserif">This is a paragraph shown in sans-serif font.</p>
<p class="monospace">This is a paragraph shown in monospace font.</p>
<p class="cursive">This is a paragraph shown in cursive font.</p>
<p class="fantasy">This is a paragraph shown in fantasy font.</p>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNfdwI_Xtbf9W9nspS443x5QrNDmICDYW0j09BqYfDqL0_JO4iAZBJWyET43JNOewZ9dOUFzze8_IOG_5BqPWmwEhn0LxgZxPN3LhWKQvpx0PCUYzS32-Xb81VXi1p3ZKfGXZVEKi2EKGROgGXY7i0ku7O5kuELX0bmu0Qlx4td1RIRslNDlybHG5w/s16000/a3.png)
<style>
p.num_size {font-size: 11px;}
p.small {font-size: small;}
p.medium {font-size: medium;}
p.large {font-size: large;}
p.xlarge {font-size: x-large;}
</style>
<p class="num_size">Paragraph text set to be 11px</p>
<p class="small">Paragraph text set to be small</p>
<p class="medium">Paragraph text set to be medium</p>
<p class="large">Paragraph text set to be large</p>
<p class="xlarge">Paragraph text set to be very large</p>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH45FKdGF6K-aoLkBoSvtVdQ7B5WFU46LJUa1Lg-F3NBIsZNk1-R-Xw-gS43fU2OaLYXybRJ7W3KT0tmA4aWuKFHTNGKFqh0rSpbZ4yJ6pt2b-AeJobWLaU1fzuzMLkDiNDiaN8YtHEHPWnZue0_Oz6NvWlD79TAB0e7Nw1U9z6qcfGqdAlNahOViQ/s16000/a3.png)
<style>
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblique;}
</style>
<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOoMuN_vGgVIXQGy4hpnhqcz-1g8a7dHl0MSheI-OVxpZNwfG9AdTaUrbKwxlLTI9c0-MkOvwgl3kcXHH_Qxnh6y-3so1xLesDPhQRah5FZW_ZRejQruO_jjhHg9gxZWfHinNFx1R_Y9i2aTYUV5CjVzrZyLN0NtvGsPyIaNwS4T3YQK24ECcSPwx/s16000/a1.png)
<style>
p.light {font-weight: lighter;}
p.bold {font-weight: bold;}
p.bolder {font-weight: bolder;}
p.thicker {font-weight: 700;}
</style>
<p class="light">This is a font with a "lighter" weight.</p>
<p class="bold">This is a font with a "bold" weight.</p>
<p class="bolder">This is a font with a "bolder" weight.</p>
<p class="thicker">This is a font with a "700" weight.</p>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzw-Zg1t8k8ikHw4VTHgnN0y9dLIAvmZbsx3QhOqm-Ipyl_UUYWeVwKh_UDG7-yvqTB1ukYd34xDzl4o7_MKND__0x_pYjNqPdvqPqXoydVSYtYHLgF6VzxMcWPmTsPsGwdm7BhEmY4LBgJe148BetHYp5GGVRcjR37AoIwefa2_g44ZSvubZPNC1P/s16000/a2.png)
<style>
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>
<p class="normal">Paragraph font variant set to normal.</p>
<p class="small">Paragraph font variant set to small-caps.</p>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_U3kLY8LU89ak3O_xelfBlK8XpHxNugHksdzpdn-qhZrO5QcQvRpwOpqF97HlXI0ijh24c9rKhgk3X-sAFWlzHzCeMK7OgMhxVjjqTWCSBiHVemLw9lIAy_xEre8TLlQyozMqTlNWW_McVh5GToMEs2nSbT47Mv1d8ATRXWO_TuL0stch1BBX3ee/s16000/a3.png)
0 Nhận xét