X

X

X

CSS3 Web Fonts । ওয়েব ফন্ট


With CSS3, web designers are no longer forced to use only web-safe fonts


CSS3 Web Font – @font-face Rule

CSS3 Web Font ব্যবহার করে কোনো ওয়েবপেজে যেকোনো ফন্ট ব্যবহার করা যায়। এমনকি কোনো ফন্ট যদি ব্যবহারকারীর কম্পিউটারে ইনস্টল করা নাও থাকে তবুও এটি উক্ত কম্পিউটারের ব্রাউজারে ব্যবহার করা যায়।

এক্ষেত্রে শুধুমাত্র উক্ত ফন্টটি ওয়েবপেজে অন্তর্ভুক্ত করলেই হবে।


Browser Support

প্রপার্টি
@font-face 4.0 9.0 3.5 3.2 10.0

বিভিন্ন Font Format সমূহ

TrueType Fonts (TTF)

TrueType ফন্ট স্ট্যান্ডার্ডটি ১৯৮০ সালে Apple ও Microsoft ডেভেলপ করেছে। এটি Mac OS and Microsoft Windows উভয় operating system এ ব্যবহৃত হয়।

OpenType Fonts (OTF)

OpenType একটি scalable computer font । এটি TrueType ফন্টের উপর ভিত্তি করে তৈরি করা হয়েছে, এবং এর ট্রেডমার্ক Microsoft দ্বারা নিবন্ধিত। এটি আধুনিক সব কম্পিউটার কর্তৃক সাপোর্টেড।

Web Open Font Format (WOFF)

WOFF font format টি ওয়েব পেজে ব্যবহার করার জন্য ডেভেলপ করা হয়েছে। এটি 2009 সালে ডেভেলপ করা হয়েছে এবং এটি W3C কর্তৃক অনুমোদিত।

Web Open Font Format (WOFF 2.0)

এটি এক প্রকার TrueType/OpenType font যেটি WOFF 1.0 এর চেয়েও ভালো মানের।

SVG Fonts/Shapes

SVG fonts এ SVG ব্যবহার করে ফন্ট তৈরি করা যায়।

Embedded OpenType Fonts (EOT)

EOT fonts OpenType font এর একটি বর্ধিত রূপ যেটি Microsoft দ্বারা ডিজাইন করা হয়েছে । এটি ওয়েব পেজে এমবডেড ফন্ট হিসেবে ব্যবহৃত হয়।


Browser 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 Not supported 36.0 35.0* Not supported 26.0
SVG Not supported 4.0 Not supported 3.2 9.0
EOT 6.0 Not supported Not supported Not supported Not supported

*IE: যখন ফন্ট ফরম্যাটটি “installable” শুধুমাত্র তখন এটিতে কাজ করে।

*Firefox: ডিফল্ট অবস্থায় সাপোর্ট করে না, তবে এটিকে সাপোর্ট করানো যায় । এজন্য ব্রাউজারের ফ্ল্যাগ প্রপার্ট ব্যবহার করে এটিকে সাপোর্টেড করতে হয়।


ইচ্ছানুযায়ী ফন্ট ব্যবহার

CSS3 @font-face rule এ প্রথমে ফন্টের নাম ডিফাইন করা হবে (যেমন, myFirstFont), এবং এর জন্য কাঙ্খিত ফন্টটিকে ফাইলের সাথে লিংক করতে হবে।

টিপস: সবসময় ফন্ট ফাইলের লিংকের জন্য ছোটো হাতের অক্ষর ব্যবহার করবেন। IE তে বড় হাতের অক্ষর ব্যবহার করার ফলে অনাকাঙ্খিত ভুল হতে পারে।

HTML ইলামেন্টে ফন্ট ব্যবহার করার জন্য নিচের কোডটি অনুসরণ করুন:

Code Example

@font-face {
   font-family: myFirstFont;
   src: url(https://www.w3schools.com/css/sansation_light.woff);
}

* {
   font-family: myFirstFont;
}

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


Bold Text এর ব্যবহার

বোল্ড টেক্সট ব্যবহার করার জন্য আরও একটি @font-face rule ব্যবহার করতে হবে, যেটিতে বোল্ড টেক্সটের বর্ণনা থাকবে:

Code Example

@font-face {
   font-family: myFirstFont;
   src: url(https://www.w3schools.com/css/sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(https://www.w3schools.com/css/sansation_bold.woff);
   font-weight: bold;
}

* {
   font-family: myFirstFont;
}

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

“sansation_bold.woff” আরেকটি ফন্ট যেটিতে বোল্ড টেক্সট বা ফন্টের বর্ণনা দেওয়া হয়েছে।

যখন “myFirstFont” ফন্ট ফ্যামিলি ব্যবহৃত হবে, এবং এটিতে বোল্ড টেক্সট টাইপ ব্যবহার করা হবে তখন এই ফন্ট ফাইলটি ব্যবহৃত হবে।

এভাবে একই ফন্টের জন্য একাধিক @font-face তৈরি করতে পারবেন।


CSS3 Font Descriptor

Descriptor মান বর্ণনা
font-family name বাধ্যতামূলক। এটি দিয়ে ফন্টের নাম বর্ণনা করা হয়।
src 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”