Thread by @swapnakpanda

🔠 CSS Font Related Properties & Values

🌆 Direct Link for High Resolution Image

If you liked this one, give a ⭐️ to this GitHub repo to support my work.

✧ Direct Link:
github.com/swapnakpanda/I…

📋 Properties we covered

➊ font-family
➋ font-size
➌ font-weight
➍ font-style
➎ font-variant
➏ text-decoration
➐ text-transform
➑ color

➊ font-family

❑ Generic Families

✧ serif
✧ sans-serif
✧ monospace
✧ cursive
✧ fantasy
✧ system-ui
✧ ui-serif
✧ ui-sans-serif
✧ ui-monospace
✧ ui-rounded
✧ emoji
✧ math
✧ fangsong

❒ Popular Families

✧ "Times New Roman"
✧ Arial
✧ Georgia
✧ Verdana
✧ Helvetica
✧ Courier

➋ font-size

❑ Absolute Size
✧ xx-small
✧ x-small
✧ small
✧ medium
✧ large
✧ x-large
✧ xx-large
✧ xxx-large;

❒ Relative Size
✧ smaller
✧ larger

❑ Length
✧ 16px
✧ 0.8em

❒ Percentage
✧ 75%

➌ font-weight

✧ normal
✧ bold
✧ lighter
✧ bolder
✧ 100
✧ 200
✧ 300
✧ 400
✧ 500
✧ 600
✧ 700
✧ 800
✧ 900

➍ font-style

✧ normal
✧ italic
✧ oblique
✧ oblique <x>deg

➎ font-variant

✧ normal
✧ small-caps

➏ text-decoration

It's a shorthand property. Longhand properties are

❑ text-decoration-line
✧ none
✧ underline
✧ overline
✧ line-through

❒ text-decoration-color

❑ text-decoration-style
✧ solid
✧ double
✧ dotted
✧ dashed
✧ wavy

❒ text-decoration-thickness

➐ text-transform

✧ none
✧ lowercase
✧ uppercase
✧ capitalize
✧ full-width
✧ full-size-kana

➑ color

It should be any valid color value in CSS.

💭 Feedbacks

✧ Did you find this thread useful?
✧ After reading through entire thread, have you learnt something worth?
✧ What improvements will you suggest?

Hey 👋. I will be happy to hear from you. Your feedbacks would help me sharing better contents in future.

End of 🧵

Hey 👋 I am a Tech Educator from India 🇮🇳

I am sharing Tutorials, Tips, Techniques, Infographics, Cheat Sheets, Interview Questions and Roadmaps on Web Development, DSA and, Database.

Are you interested? I am sure, you are.

To never miss anything, Follow Me ✅