সিএসএস ফন্ট - Css Font



টেক্সট এর ফন্ট ফ্যামিলি, স্টাইল, সাইজ ইত্যাদি নির্ধারণ করার জন্য সিএসএস font প্রপার্টি ব্যবহার করা হয়।


font family

সিএসএস এ ২ ধরনের font family আছে। এগুলো হল -
১) generic family - অনেকটা একই রকম দেখতে কতগুলো ফন্ট ফ্যামিলি (যেমন- Serif এবং Monospace) এর group,
২) font family - একটি নির্দিষ্ট ফন্ট ফ্যামিলি যেমন - Times New Roman, "Arial ইত্যাদি।

জেনারিক ফ্যামিলি ফন্ট ফ্যামিলি বর্ণনা
Serif Times New Roman
Georgia
এই ফন্টের কতগুলো বর্ণ বা letter এর শেষে লাইন থাকে, যেমন - R, T, N ইত্যাদি।
Sans-serif Arial
Verdana
এই ফন্ট দেখতে serif ফন্টের মত, এতে শুধুমাত্র কোন বর্ণ বা letter এর শেষে লাইন থাকে না।।
Monospace Courier New
Lucida Console
সব Monospace Character এর width বা প্রস্থ সমান।


Generic font family

কোন টেক্সটের ফন্ট ফ্যামিলি নির্ধারণ করা হয় সিএসএস এর ফন্ট ফ্যামিলি প্রপার্টির মাধ্যমে।

ফন্ট ফ্যামিলি প্রপার্টিতে কয়েকটি ফন্টের নাম ব্যবহার করা উচিৎ যাতে ব্রাউজার যদি নির্দিষ্ট ফন্ট খুঁজে না পায় তবে যেন অনেকটা ঐ রকম দেখতে অন্য কোন ফন্ট প্রদর্শন করতে পারে।

অর্থাৎ নির্দিষ্ট ফন্টের নাম প্রথমে লিখতে হবে এবং তারপরে ঐ রকম দেখতে অন্য ফন্টগুলোর নাম লিখতে হবে।

উদাহরণ দেখুন

p{font-family:"Times New Roman", Times, serif;}


নোট - যদি ফন্ট ফ্যামিলির নাম একাধিক শব্দের হয় তবে একে কোটেশন চিহ্নের মাধমে রাখতে হবে।


font style

সিএসএস ফন্ট স্টাইল প্রপার্টির ব্যবহার হয় লেখা বা text কে ইটালিক (Italic) রূপ দিতে।

সিএসএস ফন্ট স্টাইল প্রপার্টির ৩টি মান বা value হতে পারে, এগুলো হল-
১) normal - এই মানের ফলে স্বাভাবিক টেক্সট প্রদর্শিত হবে।
২) italic - এই মানের ফলে কিছুটা বাকা অর্থাৎ italic টেক্সট প্রদর্শিত হবে।
৩) oblique - এই মানের ফলেও কিছুটা বাকা অর্থাৎ অনেকটা italic টেক্সটের মত টেক্সট প্রদর্শিত হবে।

সিএসএস ফন্ট স্টাইল প্রপার্টি ব্যবহার করার উদাহরণ দেখুন -

উদাহরণ দেখুন

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}




font size

সিএসএস ফন্ট সাইজ প্রপার্টির মাধ্যমে লেখা বা text এর আকার বা size নির্দিষ্ট করে দেয়া যায়।

টেক্সট ওয়েব ডিজাইনের একটি গুরত্তপূর্ণ বিবেচ্য বিষয়। তাই সঠিক ভাবে ফন্ট সাইজের ব্যবহার করুন। হেডিং এর জন্য প্যারাগ্রাফের মত টেক্সট সাইজ নির্ধারণ করা বা প্যারাগ্রাফের জন্য হেডিং এর মত টেক্সট সাইজ নির্ধারণ করা ঠিক নয়।

ফন্ট সাইজের মান বা value ২ প্রকার হতে পারে। যথা -
১) Absolute size - এ পদ্ধতিতে টেক্সটের জন্য একটি নির্দিষ্ট আকার বা size নির্ধারণ করে দেয়া হয়। এ পদ্ধতিতে ইউজার কোন ব্রাউজারই টেক্সটের সাইজ পরিবর্তন করতে পারে না।
২) Relative size - এই পদ্ধতিতে টেক্সটের সাইজ এলিমেন্টের ওপর পরিবর্তনশীল হয়। এতে ইউজার চাইলে টেক্সটের সাইজও পরিবর্তন করতে পারে।

যদি টেক্সটের সাইজ নির্দিষ্ট করে দেয়া না হয় তবে স্বাভাবিক টেক্সট যেমন প্যারাগ্রাফের ক্ষেত্রে default মান বা value হিসেবে 16px সাইজের টেক্সট প্রদর্শন করবে।


পিক্সেল এ font size

পিক্সেল(px) এর মাধ্যমে লেখা বা text এর আকার বা size নির্দিষ্ট করার ফলে টেক্সট সাইজের ওপর পূর্ণ নিয়ন্ত্রণ পাওয়া যায়।

পিক্সেল(px) এর মাধ্যমে লেখা বা text এর আকার বা size নির্দিষ্ট করার একটি উদাহরণ নীচে দেখুন -

উদাহরণ দেখুন

h1{font-size:30px;}
p{font-size:17px;}


নোট- zoom tool ব্যবহার করে এই টেক্সটকে যে কোন ব্রাউজারে resize করা যায়।


Em এ font size

ইন্টারনেট এক্সপ্লোরার এ resizing সমস্যা সমাধানের জন্য অনেক ওয়েব ডেভোলপার pixel এর পরিবর্তে em পদ্ধতি ব্যবহার করে।
em size পদ্ধতি W3C দ্বারা সমর্থিত।

1em সমান হল চলতি ফন্টের সাইজ। ব্রাউজার এর স্বয়ংক্রিয় বা default ফন্ট সাইজ হল 16px, তাই 1em এর স্বয়ংক্রিয় বা default সাইজ হল 16px.

pixel থেকে em এ পরিবর্তনের জন্য নীচের সূত্রটি ব্যবহার করা যায় -
pixer/16=em

নীচে কয়েকটি উদাহরণ দেখুন -

উদাহরণ দেখুন

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */


ওপরের উদাহরণে em এ দেয়া টেক্সট সাইজ আগের উদাহরণে pixel উল্লেখ করা ফন্ট সাইজ এর সমান। তবে যাইহোক em পদ্ধতি ব্যবহার করে সকল ব্রাউজারেই ফন্ট সাইজ নির্দিষ্ট বা adjust করা যায়।

এখনো ইন্টারনেট এক্সপ্লোরার এর জন্য একটি সমস্যা রয়েই গেছে। তা হল যখন ফন্ট সাইজ resize করা হয়, তখন যেখানে বড় টেক্সট প্রদর্শন করা উচিৎ সেখানে বেশী বড় টেক্সট প্রদর্শন করে এবং যেখানে ছোট টেক্সট প্রদর্শন করা উচিৎ সেখানে অতিরিক্ত ছোট টেক্সট প্রদর্শন করে।


pixel এবং em এর মিলিত font size

সব ব্রাউজার এ সমান ভাবে প্রদর্শনের জন্য body এলিমেনটে শতকরা পদ্ধতিতে একটি স্বয়ংক্রিয় বা default ফন্ট সাইজ নির্ধারণ করে দেয়া হয়।

উদাহরণ দেখুন

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}


এখন এটি সমস্ত ব্রাউজারে একই আকারের টেক্সট প্রদর্শন করবে এবং টেক্সটকে সুন্দরভাবে zoom বা resize করা সম্ভব হবে।


সব ফন্ট প্রপার্টি

প্রপার্টি বর্ণনা
font একটি মাত্র declaration ব্যবহার করে সকল ফন্ট প্রপার্টি নির্ধারণ করে।
font-family কোন টেক্সটের জন্য font family নির্ধারণ করে।
font-size টেক্সট ফন্টের size বা আকার নির্ধারণ করে।
font-style font style নির্ধারণ করে।
font-variant টেক্সটকে small-caps ফন্টে প্রদর্শন করবে কি করবে না তা নির্দিষ্ট করে।
font-weight ফন্টের weight নির্ধারণ করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.