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



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


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

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


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

নিচে বিভিন্ন ফরম্যাটের ফন্টের নাম ও তাদের বিবরন দেখুন।

TrueType Fonts(TTF)

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

OpenType Fonts(OTF)

OpenType ফন্ট ফরম্যাট হলো একটি স্ক্যালেবেল কম্পিউটার ফন্ট। এটি TrueType এর উপর ভিত্তিকরেই তৈরি হয়েছিল এবং এটি হলো মাইক্রোসফট এর রেজিস্টার্ড ট্রেডমার্ক। বর্তমানে প্রায় সকল কম্পিউটার প্ল্যাটফর্মেই সচরাচর OpenType ফন্ট ব্যবহৃত হয়।

Web Open Font Format(WOFF)

ওয়েব পেজে ব্যবহারের জন্য WOFF একটি ফন্ট ফরম্যাট। WOFF মূলত সংকোচনশীল এবং অতিরিক্ত মেটাডাটা সম্পন্ন একটি ওপেন টাইপ অথবা ট্রু টাইপ ফন্ট। এটি ২০০৯ সালে ডেভেলপ করা হয়। বর্তমান সময়ে ওয়েবে ব্যবহার করার জন্য W3C এই ফন্ট ফরম্যাট ব্যবহারের পরামর্শ দেয়।

Web Open Font Format(WOFF 2.0)

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

SVG Font

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

Embeded Open Type Font(EOT)

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


ব্রাউজার সাপোর্ট

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

ফন্ট ফরম্যাট
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 - স্বয়ংক্রিয় বা defolt ভাবে সমর্থন করে না তবে "true" টাইপ নির্ধারণ করে ব্যবহার করা যেতে পারে।


নিজস্ব ফন্টের ব্যবহার

সিএসএস ৩ এর @font-face প্রপার্টি প্রয়োগ করতে হলে প্রথমেই এর মধ্যে ফন্ট এর নাম (যেমন- myFirstFont) নির্ধারণ করতে হয় এবং তারপর ফন্ট ফাইলের অবস্থান অর্থাৎ URL নির্দেশ করে দিতে হয়।

এখন যে এইচটিএমএল এলিমেন্টে এই ফন্ট ব্যবহার করতে হবে তার সিএসএস font-family প্রোপার্টির মাধ্যমে ফন্টটির নাম (myFirstFont) নির্দেশ করে দিতে হবে।

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

উদাহরণ

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

div {
font-family: myFirstFont;
}




বোল্ড টেক্সট

ব্যবহৃত ফন্টের টেক্সটকে বোল্ড বা গাঢ় করতে চাইলে @font-face এর মধ্যে আরো একটি প্রোপার্টি font-weight ব্যবহার করা যেতে পারে। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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


sansation_bold.woff হল একটি এমন ফন্ট ফাইল যাতে Sansation ফন্টের জন্য বোল্ড ক্যারেক্টার যুক্ত আছে।
ব্রাউজার তখনই টেক্সটকে বোল্ড করে যখন ফন্টটির বোল্ড ক্যারেক্টার খুজে পায়।


সিএসএস ৩ এর ফন্ট প্রোপার্টিসমূহ

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

প্রপার্টি মান বর্ণনা
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"।







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

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