সিএসএস৩ ওয়েব ফন্ট - Css3 Web Font


সাধারণত কোন ওয়েব সাইট এর বেশির ভাগ অংস জুড়েই লেখা বা text কন্টেন্ট থাকে। তাই লেখার বা text এর সঠিক স্টাইল নির্ধারণ করা আকর্ষণীয় ওয়েব পেজ তথা ওয়েব সাইট ডিজাইনে প্রভাব বিস্তার করে।


@font-face প্রোপার্টি

ওয়েব পেজে কোন ফন্ট ব্যাবহার করতে হলে, সাধারণত ফন্ট ফাইল গুলো ব্যাবহারকারীর কম্পিউটারে থাকতে হয়। এটা অনেক ক্ষেত্রেই নানা রকম সমস্যার উদ্রেক করে।

সিএসএস @font-face প্রোপার্টি ব্যবহার করে কোন ওয়েব পেজে এমন সকল ফন্ট ব্যবহার করা যায় যেটা ব্যাবহারকারীর কম্পিউটারে নেই অর্থাৎ @font-face প্রোপার্টি ব্যবহার করে কোন ফন্টকে ওয়েব পেজের সাথে লিংক করে দেয়া যায়।

এতে প্রথমে ওয়েব সার্ভারে ফন্টটি রাখতে হয়। তারপর ব্যাবহারকারী যখন ওয়েব পেজটি ব্রাউজ করে তখন ফন্ট ফাইলটি স্বয়ংক্রিয় ভাবেই ব্যাবহারকারীর ডিভাইসে ডাউনলোড হয়ে যায় এবং কন্টেন্টও গুলো সেই নতুন ফন্টেই প্রদর্শিত হয়।


@font-face প্রপার্টির ব্যাবহার

সিএসএস 3.0 এর @font-face প্রোপার্টি ব্যাবহার করার জন্য ফন্টের নাম উল্লেখ করা হয়, উদাহরণস্বরূপ - myFirstFont, তারপর ফন্ট ফাইলের অবস্থান অর্থাৎ URL বা লোকেশন নির্দেশ করে দিতে হয়।

এখন যে এইচটিএমএল এলিমেন্টে এই ফন্ট ব্যবহার করতে হবে অর্থাৎ <h1>, <h2>, <p> ইত্যাদি ট্যাগের স্টাইল কোডে font-family প্রোপার্টির মাধ্যমে ফন্টটির নাম (myFirstFont) নির্দেশ করে দিতে হবে।

নিচে @font-facefont-family প্রোপার্টি ব্যাবহার করে একটি উদাহরনের জন্য সিএসএস স্টাইল কোড দেখুন।

উদাহরণ

@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
   }

h1 {
   font-family: FirstFont;
   }

কোড এডিটর


নোট - ফন্ট এর URL সর্বক্ষেত্রে ছোট-হাতের অক্ষরে লিখতে হয়, অন্যথায় ইন্টারনেট এক্সপ্লোরার তা ঠিক ভাবে প্রদর্শিত হবে না।


ফন্টের বিভিন্ন ফরম্যাট

নিচে ওয়েব পেজে ব্যাবহৃত বিভিন্ন ফন্টের ফরম্যাট তাদের বিবরন দেখুন।

TrueType Fonts(TTF)
TrueType হলো একটি জনপ্রিয় আদর্শিক ফন্ট যা ১৯৮০ সালে এ্যাপল এবং মাইক্রোসফট কর্তৃক যৌথভাবে ডেভেলপ করা হয়। ম্যাক অপারেটিং সিস্টেম এবং মাইক্রোসফট উইন্ডোজ অপারেটিং সিস্টেম উভয়ের জন্যই TrueType Fonts(TTF) হল একটি সাধারণ ফন্ট ফরম্যাট।

OpenType Fonts(OTF)
একটি স্ক্যালেবেল কম্পিউটার ফন্ট ফরম্যাট হল OpenType ফন্ট। এটি মূলত এ্যাপল এবং মাইক্রোসফট কর্তৃক যৌথভাবে ডেভেলপ করা অর্থাৎ TrueType ফন্টের উপর নির্ভর করেই তৈরি হয়েছিল এবং এটি হলো মাইক্রোসফট এর রেজিস্টার্ড ট্রেডমার্ক। বর্তমানে প্রায় সকল কম্পিউটার প্ল্যাটফর্মেই সচরাচর OpenType ফন্ট ব্যবহৃত হয়।

Web Open Font Format(WOFF)
WOFF একটি ফন্ট ফরম্যাট যা বিশেষত ওয়েব পেজে ব্যবহারের জন্য তৈরি হয়েছে। WOFF মূলত সংকোচনশীল এবং অতিরিক্ত মেটা ডাটা সম্পন্ন একটি ওপেন টাইপ অথবা TrueType ফন্ট। এটি ২০০৯ সালে ডেভেলপ করা হয়। বর্তমান সময়ে ওয়েবে ব্যবহার করার জন্য W3C এই ফন্ট ফরম্যাট ব্যবহারের পরামর্শ দেয়।

Web Open Font Format(WOFF 2.0)
Web Open Font Format(WOFF 2.0) হল একটি ট্রু টাইপ অথবা ওপেন টাইপ ফন্ট যা WOFF 1.0 থেকেও অধিক সংকোচনশীল।

SVG Font
কোন লেখা বা text প্রদর্শিত হওয়ার সময় SVG ফন্ট গ্লিফ বা glyphs হিসেবে SVG ব্যবহার করে। SVG 1.1 এ ফন্ট তৈরি করার জন্য একটি মডিউল নির্ধারণ করা হয়েছে। এছাড়া SVG ডকুমেন্টেও সিএসএস প্রয়োগ করে SVG লেখার জন্য @font-face প্রোপার্টি ব্যবহার করা যায়।

Embeded Open Type Font(EOT)
Embeded Open Type Font হল ওপেন টাইপ ফন্টেরই একটি সংক্ষিপ্ত রুপ যা ওয়েব পেজে এম্বেডেড বা সম্প্রসারিত ফন্ট হিসাবে ব্যবহার করা যায়। এটি মাইক্রোসফট কর্তৃক ডিজাইন করা হয়েছে।


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

সিএসএস এর @font-face প্রোপার্টির অভ্যন্তরে font-weight প্রোপার্টি ব্যাবহার করে লেখা বা text গুলোকে গাঢ় বা bold স্টাইল প্রদান করা যায়।

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

উদাহরণ

@font-face {
   font-family: myFirstFont;
   src: url(myFirstFont_bold.woff);
   font-weight: bold;
   }

কোড এডিটর


কোন লেখাকে গাঢ় বা bold ফন্টের মত স্টাইল করার জন্য ঐ ফন্টের bold ফরম্যাটটিও প্রয়োজন হয়। এক্ষেত্রে myFirstFont_bold.woff হল FirstFont ফন্টের জন্য বোল্ড ক্যারেক্টার যুক্ত একটি ফন্ট ফাইল। কোন কোন ফন্টের বোল্ড ক্যারেক্টার খুজে পেলেই কেবল ওয়েব ব্রাউজার লেখা বা text কে গার বা bold স্টাইল প্রদান করতে পারে।


ব্রাউজার সমর্থন

নিচের টেবিলের সংখ্যা গুলো সেই প্রথম ব্রাউজার সংস্করণটি কে নির্দেশ করে যা ফন্ট ফরম্যাট গুলো পুরোপুরি সমর্থন বা support করে।

ফন্ট ফরম্যাট
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 অসমর্থিত 36.0 35.0* অসমর্থিত 26.0
SVG অসমর্থিত 4.0 অসমর্থিত 3.2 9.0
EOT 6.0 অসমর্থিত অসমর্থিত অসমর্থিত অসমর্থিত

নোট - IE এর ক্ষেত্রে "installable" নির্ধারণ করা হলেই কেবল ফন্ট ফরম্যাট সমর্থন করে অর্থাৎ কাজ করে।

নোট - Firefox এর ক্ষেত্রে পূর্ব-নির্ধারিত বা defalt ভাবে সমর্থন করে না তবে "true" টাইপ নির্ধারণ করে ব্যবহার করা যায়।


সকল ওয়েব ফন্ট প্রোপার্টি

নিচের টেবিলে সিএসএস 3.0 এর ফন্ট প্রপার্টি, নির্ধারণযোগ্য মান এবং বর্ণনা দেখুন।

প্রপার্টি মান বর্ণনা
font-family name আবশ্যক। ফন্টের নাম নির্ধারণ করে।
src URL আবশ্যক। ফন্ট ফাইলের URL নির্ধারণ করে।
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
ঐচ্ছিক। ফন্ট এর বিস্তৃতি কেমন হবে তা নির্ধারণ করে। এটির ডিফল্ট মান "normal"।
font-style normal
italic
oblique
ঐচ্ছিক। ফন্ট স্টাইল কেমন হবে তা নির্ধারণ করে। এটির ডিফল্ট মান "normal"।
font-weight normal
bold
100
200
300
400
500
600
700
800
900
ঐচ্ছিক। ফন্ট কেমন মোটা দেখাবে তা নির্ধারণ করে। এটির ডিফল্ট মান "normal"।
unicode-range unicode-range ঐচ্ছিক। ফন্ট কতৃক সাপোর্টেড ইউনিকোড ক্যারেক্টারের সীমা নির্ধারণ করে। এটির ডিফল্ট মান "U+0-10FFFF"।