CSS ব্যবহার করে ফন্ট স্টাইল করার জন্য একটি ব্যবহারিক গাইড

সিএসএস ফন্ট স্টাইলিংয়ে একটি মুখ্য ভূমিকা পালন করে৷ CSS ফন্ট বৈশিষ্ট্য আমাদের ফন্ট-পরিবার, ফন্ট-আকার, ফন্ট-ওজন, ফন্ট-কারনিং এবং আরও অনেক বৈশিষ্ট্য পরিবর্তন করতে দেয়। CSS ফন্ট প্রপার্টি হল ফন্ট-স্টাইল, ফন্ট-ভেরিয়েন্ট, ফন্ট-ওয়েট, ফন্ট-সাইজ/লাইন-উচ্চতা এবং ফন্ট-পরিবারের জন্য একটি সংক্ষিপ্ত বিবরণ। আরও, আমরা CSS টেক্সট-শ্যাডো, টেক্সট-স্ট্রোক, টেক্সট-ফিল-কালার, রঙ ইত্যাদি ব্যবহার করে টেক্সট-ডেকোরেশনের মাধ্যমে টেক্সটে স্টাইল প্রয়োগ করতে পারি।

রঙ

এই বৈশিষ্ট্যটি পাঠ্যের রঙ পরিবর্তন করতে ব্যবহৃত হয়।

ফন্ট-পরিবার

এই বৈশিষ্ট্যটি একটি উপাদানের জন্য ফন্ট ফেস সেট করতে ব্যবহৃত হয়।

ফন্ট-কারিং

ক্যারেক্টার স্পেসিং ইউনিফর্ম করতে এবং পঠনযোগ্যতা বাড়াতে, ফন্ট-কার্নিং বৈশিষ্ট্য ব্যবহার করা হয়। যাইহোক, এই সম্পত্তি ফন্ট নির্দিষ্ট.

ফন্ট-সাইজ

ফন্ট-আকারের বৈশিষ্ট্য ফন্টের আকার নির্ধারণ করে।

ফন্ট-স্ট্রেচ

কিছু ফন্টের অতিরিক্ত মুখ থাকে যেমন ঘনীভূত, গাঢ় ইত্যাদি। এগুলি নির্দিষ্ট করতে ফন্ট-স্ট্রেচ প্রপার্টি ব্যবহার করা হয়।

ফন্ট-স্টাইল

একটি কোণ দ্বারা টেক্সট তির্যক করতে, ফন্ট-স্টাইল বৈশিষ্ট্য ব্যবহার করা হয়।

ফন্ট-ভেরিয়েন্ট

ফন্ট-ভেরিয়েন্ট আমাদের নির্দিষ্ট করতে দেয় যে একটি উপাদান ছোট ক্যাপগুলিতে প্রদর্শিত হবে কি না৷

ফন্ট-ওজন

অক্ষরের সাহসিকতা ফন্ট-ওয়েট বৈশিষ্ট্য দ্বারা নির্দিষ্ট করা হয়।

লাইন-উচ্চতা

এই বৈশিষ্ট্যটি দুটি লাইনের মধ্যে ব্যবধান নির্ধারণ করে।

টেক্সট-সজ্জা

আন্ডারলাইন বা ওভারলাইন এবং স্টাইল করতে, পাঠ্য-সজ্জা ব্যবহার করা হয়।

পাঠ্য-ছায়া

বক্স-শ্যাডোর মতো, এই বৈশিষ্ট্যটি ইচ্ছামতো অক্ষরগুলিতে একটি ছায়া যোগ করে।

উপরন্তু, টেক্সট-ইন্ডেন্ট, টেক্সট-ওভারফ্লো, হোয়াইট-স্পেস, ওয়ার্ড-ব্রেক, ডিরেকশন, হাইফেন, টেক্সট-অরিয়েন্টেশন, ওয়ার্ড-র্যাপ ইত্যাদির মতো টেক্সট লেআউট বৈশিষ্ট্য রয়েছে।

সিনট্যাক্স

ফন্ট সম্পত্তির সিনট্যাক্স নিম্নরূপ -

নির্বাচক { font-property:/*value*/}

উদাহরণ

নিম্নলিখিত উদাহরণগুলি সিএসএস ফন্টের বৈশিষ্ট্য −

ডেমো শিরোনাম

এটি ডেমো পাঠ্য

এই পাঠ্যটি ডেমোর জন্য এবং এখানে অন্তর্ভুক্ত করা হয়েছে CSS এ বিভিন্ন ফন্ট শৈলী প্রদর্শন করুন।
ভিন্ন ফন্ট শৈলী সহ আরেকটি পাঠ্য।

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

উদাহরণ

এটি ডেমো টেক্সট

এটি আরেকটি ডেমো টেক্সট
 
আউটপুট
 

 এটি নিম্নলিখিত আউটপুট দেয় -