X

X

X

CSS ফন্ট


CSS font property দিয়ে কোনো টেক্সটের font family, boldness, size, এবং style ডিফাইন বা বর্ণনা করা হয়।


Serif এবং Sans-serif Font এর মধ্যে পার্থক্য

Serif vs. Sans-serif


CSS Font Family সমূহ

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

  • generic family – দেখতে মোটামুটি একই রকম হয়, যেমন, “Serif” অথবা “Monospace”
  • font family – নির্দিষ্ট কোনো ফন্ট ফ্যামিলি। যেমন, “Times New Roman” অথবা “Arial”
Generic family Font family Description
Serif Times New Roman
Georgia
এর প্রতিটি ফন্টের শেষে ছোট করে মাত্রা থাকে। বাংলা যেমন, পূর্ণমাত্র, অর্ধমাত্রার ফন্ট আছে ঠিক সেরকম।
Sans-serif Arial
Verdana
এই ফন্টগুলো মাত্রাহীন। এদের নিচের কোনো ছোটো আকারের লাইন থাকে না।
Monospace Courier New
Lucida Console
সব মনোস্পেস ফন্টের সমান আকৃতি হয়ে থাকে।

বি:দ্র: কম্পিউটার স্ক্রিনে serif font এর তুলনায় sans-serif font পড়া অধিক সুবিধাজনক। কাজেই অধিক টেক্সট বিশিষ্ট কন্টেন্ট ওবেসাইটে sans-serif font ব্যবহার করা উচিৎ।


Font Family

font-family property ব্যবহার করে কোনো ইলামেন্টের ফন্ট ফ্যামিলি সেট করা হয়।

font-family property এর জন্য বেশ কয়েকটি মান সেট করা উচিৎ। যদি কোনো কারণে কোনো ফন্ট ফ্যামিলি লোড না হয় তবে পরের ফন্ট ফ্যামিলিগুলো ব্যবহৃত হয়।

প্রথমে আপনার কাঙ্খিত কোনো ফন্ট ফ্যামিলি ব্যবহার করবেন এরপর ফলব্যাক ফন্ট ফ্যামিলি হিসেবে কোনো জেনেরিক ফ্যামিলিকে ব্যবহার করবেন। তাহলে যদি আপনার কাঙ্খিত ফন্ট ফ্যামিলি লোড না হয়, ব্রাউজার স্বয়ংক্রিয়ভাবে ফলব্যাক ফন্ট ফ্যামিলিকে ব্যবহার করবে।

নোট: যদি কোনো ফন্ট ফ্যামিলি নাম একাধিক শব্দ বিশিষ্ট হয় তবে কোটেশন মার্ক দিয়ে ফন্ট ফ্যামিলির নাম লিখতে হবে। যেমন, “Times New Roman”।

নিচে কমা দিয়ে পৃথক করে একাধিক ফন্ট ফ্যামিলি বর্ণনা করা হলো:

Code Example

<style>
p.serif {
    font-family: "Times New Roman", Times, serif;
}

p.sansserif {
    font-family: Arial, Helvetica, sans-serif;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Font এর Style

font-style property ব্যবহার করে একটি ইলামেন্টের টেক্সটকে বিভিন্ন উপায়ে উপস্থাপণ করা যায়। এটি সাধারণত ফন্টকে ইটালিক করার ক্ষেত্রে বেশি ব্যবহৃত হয়।

এই প্রপার্টির তিনটি মান রয়েছে। যেমন:

  • normal – টেক্সটকে স্বাভাবিকভাবে উপস্থাপণ করার জন্য ব্যবহত হয়।
  • italic – টেক্সটকে ইটালিকভাবে উপস্থাপণ করার জন্য ব্যবহত হয়।
  • oblique – ইটালিকের মতই। কিন্তু কিছু কিছু ব্রাউজারে এটি সাপোর্ট করে না।

Code Example

<style>
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Font এর Size

ফন্টের সাইজ প্রকাশ করার জন্য font-size property ব্যবহার করা হয়।

ওয়েব ডিজাইন করার ক্ষেত্রে এই প্রপার্টি খুবই গুরুত্তপূর্ণ। কেননা এটি দিয়ে আমরা একটি ইলামেন্টের ফন্ট সাইজ বিভিন্ন আকৃতিতে প্রকাশ করতে পারি। তবে মনে রাখা প্রয়োজন, প্যারাগ্রাফ কিংব অন্য কোনো ইলামেন্টকে শিরোনাম বা Heading Element এর মত উপস্থাপণ করার জন্য এটিকে ব্যবহার করা উচিৎ নয়। কেননা শিরোনাম ইলামেন্টগুলো সার্চ ইঞ্জিন অপটিমাইজেশনের খুবই গুরুত্ত্বপূর্ণ। সার্চ ইঞ্জিনগুলো শিরোনাম ইলামেন্টকে ইন্ডেক্সিং করার সময় অধিক প্রাধান্য দিয়ে থাকে।

কন্টেন্ট উপস্থাপণ করার জন্য সবসময় সঠিক ইলামেন্ট ব্যবহার করবেন যেমন- শিরোনামের জন্য <h1> – <h6> এবং প্যারাগ্রাফের জন্য <p> ইলামেন্ট প্রযোজ্য।

ফন্ট সাইজের মান নির্দিষ্ট বা আনুপাতিক (সম্পর্কযুক্ত) হতে পারে।

নির্দিষ্ট মান:

  • সব ব্রাউজারে একই আকৃতিতে উপস্থাপিত হয়।
  • ইউজার ফন্টের আকৃতি পরিবর্তন করতে পারে না।
  • যখন ডিভাইসের সাইজের মান জানা থাকবে তখন ফন্টের জন্য নির্দিষ্ট বা Absolute মান ব্যবহার করা উচিৎ।

আনুপাতিক বা Relative মান:

  • আশেপাশের ইলামেন্টের ফন্ট সাইজের উপর ভিত্তি করে মান সেট করা হয়।
  • ইউজার ব্রাউজারে ফন্টের সাইজ পরিবর্তন করতে পারে।

বি:দ্র: যদি ফন্ট সাইজ সেট না করেন, তবে ডিফল্ট মান ব্যবহৃত হবে। যেমন প্যারাগ্রাফের ডিফল্ট ফন্ট সাইজ 16px বা 1em ।


Pixel এ Font Size নির্ধারণ

পিক্সেলে ফন্ট সাইজ নির্ধারণের মাধ্যমে ইলামেন্টের ফন্ট আকৃতির উপর পূর্ণ নিয়ন্ত্রণ নেওয়া হয়। অর্থাৎ, এটি সবসময় একই আকৃতির থাকে।

Code Example

<style>
h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


টিপস: পিক্সেল একক ব্যবহার করলেও ওয়েব পেজ ব্রাউজরে জুম করে বড় করা যায়।


Em এককে Font Size নির্ধারণ

এটি অধিক ফ্লেক্সিবল । একারণে অনেক ডেভেলপার পিক্সেলের পরিবর্তে EM একক ব্যবহার করেন। এটি W3C কর্তৃক সুপারিশকৃত।

1em = current font size । অর্থাৎ, কোনো ব্রাউজরে প্রতিটি ইলামেন্টের যে ডিফল্ট ফন্ট সাইজ রয়েছে, সেগুলোকে 1em হিসেবে ধরা হয়। অধিকাংশ ব্রাউজারে ডিফল্ট টেক্সট সাইজ হলো ১৬px । কাজেই 1em = 16px ।

পিক্সেল থেকে EM এ মান কনভার্ট করার জন্য নিম্নোক্ত ফরমূলা ব্যবহার করা হয়:
pixels/16=em

Code Example

<style>
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 */
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


উপরের উদাহরণে টেক্সট সাইজ em এ ডিফাইন করা হয়েছে। এটি তার আগের উদাহরণের টেক্সটের অনুরূপ সাইজের। em একক ব্যবহার করে যেকোনো ব্রাউজারে সঠিকভাবে টেক্সট সাইজ ডিফাইন করা যায়।

তবে ইন্টারনেট এক্সপ্লোরারের পুরোনো ভার্শনগুলোতে কিছু সমস্যা রয়েছে। যখন টেক্সট সাইজ বড় করা হয় তখন বেশি বড় হয়েছে যায়, আবার ছোটো করলে বেশি ছোটো হয়ে যায়।


Percent এবং Em এর একসাথে ব্যবহার

সব ব্রাউজারে সঠিকভাবে টেক্সট সাইজ উপস্থাপণ করার জন্য <body> element এর টেক্সট সাইজ শতকরা বা (percent – % ) এককে উপস্থাপণ করা উচিৎ।

Code Example

<style>
body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


এখন দেখুন আমাদের কোড সুন্দরভাবে কাজ করছে। সব ব্রাউজারে টেক্সট সাইজ সমানভাবে উপস্থাপিত হচ্ছে এবং সব ব্রাউজারে এটিকে সঠিকভাবে জুম বা রিসাইজ করা যাচ্ছে।


Font Weight

font-weight property দিয়ে ফন্টের ওয়েইট বর্ণনা করা হয়। অর্থাৎ কোনো ফন্ট কতটুকু মোটা বা চিকন হবে তা এই প্রপার্টি দিয়ে বর্ণনা করা হয়:

Code Example

<style>
p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Font Variant

font-variant property দিয়ে কোনো টেক্সট small-caps এ উপস্থাপিত হবে কি হবে না তা বর্ণনা করা হয়।

কোনো small-caps font -এ সব অক্ষর বড় হাতের অক্ষরে উপস্থাপিত হয়। কিন্তু বাস্তবে বড় হাতের অক্ষরের সাইজ যতটুকু হয় তারচেয়ে ছোটো সাইজে উপস্থাপিত হয়।

Code Example

<style>
p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


সব CSS Font Property সমূহ

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