CSS ফন্ট স্টাইলিং-এ কীভাবে ভূমিকা পালন করে। CSS font প্রপার্টিগুলো আমাদের font-family, font-size, font-weight, font-kerning এবং আরও অনেক প্রপার্টি পরিবর্তন করতে দেয়। CSS font প্রপার্টি font-style, font-variant, font-weight, font-size/line-height এবং font-family-এর শর্টহ্যান্ড। উপরন্তু, CSS text-shadow, text-stroke, text-fill-color, color ইত্যাদি ব্যবহার করে text-decoration-এর মাধ্যমে টেক্সটে স্টাইল প্রয়োগ করা যায়।
color
এই প্রপার্টি টেক্সটের রঙ পরিবর্তন করতে ব্যবহৃত হয়।
font-family
এই প্রপার্টি একটি এলিমেন্টের জন্য ফন্ট ফেস সেট করতে ব্যবহৃত হয়।
font-kerning
ক্যারেক্টার স্পেসিং ইউনিফর্ম করতে এবং পাঠযোগ্যতা বাড়াতে font-kerning প্রপার্টি ব্যবহার হয়। তবে এই প্রপার্টি ফন্ট-নির্দিষ্ট।
font-size
font-size প্রপার্টি ফন্টের আকার সেট করে।
font-stretch
কিছু ফন্টের অতিরিক্ত ফেস থাকে যেমন condensed, bold ইত্যাদি। font-stretch প্রপার্টি এগুলো নির্দিষ্ট করতে ব্যবহৃত হয়।
font-style
টেক্সটকে একটি কোণে ইটালিক করতে font-style প্রপার্টি ব্যবহার হয়।
font-variant
font-variant ব্যবহার করে একটি এলিমেন্ট स्मল-ক্যাপসে প্রদর্শন করা উচিত কিনা তা নির্দিষ্ট করা যায়।
font-weight
ক্যারেক্টারগুলোর বোল্ডনেস font-weight প্রপার্টি দ্বারা নির্দিষ্ট হয়।
line-height
এই প্রপার্টি দুটি লাইনের মাঝখানের স্পেসিং সেট করে।
text-decoration
আন্ডারলাইন বা ওভারলাইন এবং সেটি স্টাইল করতে text-decoration ব্যবহার হয়।
text-shadow
box-shadow-এর মতো, এই প্রপার্টি ক্যারেক্টারগুলোর শ্যাডো যোগ করে।
অতিরিক্তভাবে, text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap ইত্যাদি টেক্সট লে-আউট প্রপার্টি রয়েছে।
সিনট্যাক্স
font প্রপার্টির সিনট্যাক্স নিচের মতো:
Selector { font-property: /*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS fonts প্রপার্টি ব্যাখ্যা করে:
<!DOCTYPE html> <html> <head> <style> p { font: 1.6em arial; text-shadow: -3px -12px lightblue; } p + p { font: italic bold 12px/30px menu; text-shadow: unset; box-shadow: 0 0 5px 1px black; } div { width: 30%; font-size: 1.4em; font-family: cursive; background-color: tomato; } </style> </head> <body> <h2>Demo Heading</h2> <p>This is demo text</p> <p>This text is for demo and included here to display different font styles in CSS.</p> <div>Another text with different font style.</div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> p { font: oblique 5deg small-caps bold 1.3em/0.5px cursive; border: 3px solid lightcyan; } </style> </head> <body> <p>This is demo text</p> <p>This is another demo text</p> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
