সিএসএস(৩) @font-face

@font-face প্রোপার্টির এর মাধ্যমে একজন ওয়েব-ডিজাইনার ঐ সকল ফন্ট ব্যবহার করতে পারে যা ব্যবহারকারীর কম্পিউটারে ইনস্টল করা থাকে না।

সুতরাং আপনি যদি আপনার ওয়েব সাইটে আপনার ইচ্ছামত বা নিজের তৈরি ফন্ট ব্যবহার করতে চান, তাহলে আপনার সার্ভারে উক্ত ফন্ট ফাইলটি যুক্ত করুন। এরপরে ব্যবহারকারী যখন আপনার সাইট ভিজিট করবে তখন ফন্ট ফাইলটি স্বয়ংক্রিয়ভাবে তার ডিভাইজে ডাউনলোড হবে এবং সে আপনার নিজের ব্যবহৃত ফন্টেই সাইট এর কন্টেন্ট দেখবে।

এক কথায় আপনি সিএসএস(৩) @font-face এর মধ্যে আপনার ওয়েব সাইটে নিজস্ব ফন্ট ব্যবহার করতে পারবেন।

এক নজরে সিএসএস(৩) ফন্ট প্রোপার্টিসমূহ

নিন্মের টেবিলে @font-face এ ব্যবহত সবগুলো প্রোপার্টির মান সম্পর্কে আলোচনা করা হলো।

প্রোপার্টি	ভ্যালু	বর্ণনা
font-display	auto block swap fallback optional	ঐচ্ছিক। ফন্ট কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে।
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"।

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

TrueType Fonts(TTF)

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

OpenType Fonts(OTF)

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

Web Open Font Format(WOFF)

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

ওয়েব ওপেন ফন্ট ফরম্যাট(WOFF 2.0)

ট্রু টাইপ অথবা ওপেন টাইপ ফন্ট যা WOFF 1.0 থেকে অধিক সংকোচনশীল।

SVG Font

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

Embeded Open Type Font(EOT)

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

ফন্ট ফরম্যাট এর জন্য ব্রাউজার সাপোর্ট

ফন্ট ফরমেট	Google Chrome	Edge/IE	Mozila Firefox	Safari	Opera
TTF/OTF	৪.০	৯.০	৩.৫	৩.১	১০.০
WOFF	৫.০	৯.০	৩.৬	৫.১	১১.১
WOFF2	৩৬.০	সাপোর্ট করে না	৩৫.০*	সাপোর্ট করে না	২৬.০
SVG	৪.০	সাপোর্ট করে না	সাপোর্ট করে না	৩.২	৯.০
EOT	সাপোর্ট করে না	৬.০	সাপোর্ট করে না	সাপোর্ট করে না	সাপোর্ট করে না

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css3 own light font</title>
<style>
	@font-face {
	   font-family: myOwnFont;
	   src: url(sansation_light.woff);
	}
	div {
	   font-family: myOwnFont;
	}
</style>
</head>
<body>
	<div>This is custom sansation_light font.</div>
	<p><b>বিঃদ্রঃ</b> ইন্টারনেট এক্সপ্লোরার ৮ এবং এর পূর্ববর্তী ভার্সনে @font-face rule সাপোর্ট করে না।</p>
</body>
</html>

ফলাফল

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

কাস্টম বোল্ড(Bold) টেক্সট

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <title>css3 own bold font</title>
<style>
	@font-face {
	   font-family: myOwnFont;
	   src: url(sansation_bold.woff);
	   font-weight: bold;
	}
	div {
	   font-family: myOwnFont;
	}
</style>
</head>
<body>
	<div>This is custom sansation_bold font.</div>
</body>
</html>

ফলাফল

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

প্রোপার্টি	Google Chrome	Edge/IE	Mozila Firefox	Safari	Opera
@font-face	৪.০	৯.০	৩.৫	৩.২	১০.০

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল