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


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

A A A



ফন্ট ফ্যামিলি

সিএসএস এ ২ ধরনের font family আছে। এগুলো হল -

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

font-family প্রোপার্টি

কোন লেখার জন্য ফন্ট ফ্যামিলি নির্ধারণ করা হয় সিএসএস এর font-family প্রোপার্টি ব্যবহার করে। font-family প্রপার্টিতে একই রকম দেখতে বা অনেকটা মিল আছে, এমন কয়েকটি ফন্টের নাম ব্যবহার করা উচিৎ যাতে ব্রাউজার কোন কারনে যদি নির্দিষ্ট ফন্ট খুঁজে না পায় তবে যেন অনেকটা ঐ রকম দেখতে অন্য কোন ফন্ট প্রদর্শন করতে পারে।

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

নিচে font-family প্রপার্টি ব্যবহার করে একটি উদাহরন দেখুন।

উদাহরণ

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

কোড এডিটর


ওয়েব পেজের জন্য আপনার পছন্দ মত ফন্ট খুজে নিতে গুগল এর Google Fonts ওয়েব পেজটি ব্রাউজ করুন।


font style প্রোপার্টি

সিএসএস এর font style প্রোপার্টি ব্যবহার করে কোন লেখাকে একটু বাঁকা অর্থাৎ italic স্টাইল করা হয়। font style এর জন্য যে সকল মান নির্ধারণ করা যায়, সেগুলো হল - normal, italic এবং oblique.

oblique স্টাইলটি মুলত italic স্টাইল থেকে একটু কম বাঁকা।

নিচে একটি উদাহরন দেখুন, যেখানে একটি লেখার জন্য font style প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

p {
  font-style: italic;
  }

কোড এডিটর



font-weight প্রোপার্টি

সিএসএস এর font-weight প্রোপার্টি ব্যবহার করে কোন লেখা বা text গভীরতা বা weight নির্ধারণ করা যায়।

নিচে একটি উদাহরন দেখুন, যেখানে একটি লেখার জন্য font-weight প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

p {
  font-weight: bold;
  }

কোড এডিটর



font-variant প্রোপার্টি

সিএসএস এর font-variant প্রোপার্টি ব্যবহার করে কোন লেখার সকল শব্দ বা ward গুলোর প্রথম বর্ণ বা letter কে একটু বড় করে এবং বড় হাতের অক্ষরে প্রদর্শিত করা যায়।

নিচে একটি উদাহরন দেখুন, যেখানে একটি লেখার জন্য font-variant প্রোপার্টি ব্যবহার করা হয়েছে।

উদাহরণ

h1 {
   font-variant: small-caps;
   }

কোড এডিটর



font-size প্রোপার্টি

সিএসএস এর font-size প্রোপার্টি ব্যবহার করে লেখা বা text এর আকার বা size নির্ধারণ করা যায়।

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

ফন্ট সাইজের মান বা value ২ প্রকার হতে পারে। যথা -

যদি কোন লেখার আকার নির্দিষ্ট করে দেয়া না হয় তবে, পারাগ্রাফ এর ক্ষেত্রে পূর্ব-নির্ধারিত বা default মান হল16px অর্থাৎ ব্রাউজার লেখা গুলোকে 16px এর আকারে প্রদর্শন করবে। এখানে মনে রাখুন 16px=1.0em


font-size এবং px

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

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

উদাহরণ

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

কোড এডিটর


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


font-size এবং em

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

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

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

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

উদাহরণ

h1 {
  font-size: 2.187em; /* 35px/16=2.187em */
   }

p {
  font-size: 1.0em; /* 16px/16=1.0em */
  }

কোড এডিটর


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

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


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

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

উদাহরণ

body {
   font-size:100%;
   }
   
h1 {
   font-size:2.175em;
   }
   
p {
   font-size:1.0em;
  }

কোড এডিটর


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


শর্টহ্যান্ড প্রোপার্টি - font

সিএসএস এর শর্টহ্যান্ড প্রোপার্টি ব্যবহার করে অনেক গুলো সিএসএস প্রোপার্টি না লিখে কেবল মাত্র শর্টহ্যান্ড প্রোপার্টি ব্যবহার করে ঐ সকল প্রোপার্টির মান বা value নির্ধারণ করে দেয়া যায়। যেমন সিএসএস font শর্টহ্যান্ড প্রোপার্টি ব্যবহার করে নিচের প্রোপার্টি গুলোর মান নির্ধারণ করা যায়।

font-style, font-variant, font-weight, font-size/line-height এবং font-family.

উদাহরণ

h1 {
   font: italic small-caps bold 22px/42px Times New Roman, Times, serif; 
}

কোড এডিটর



সিএসএস এর সকল ফন্ট প্রোপার্টি

প্রোপার্টিমানবর্ণনা
font-family
font style
font-weight
font-variant
font-size
font