সিএসএস ৩ ওয়েব ফন্ট (CSS3 Web Fonts)

Sheikh Mahfuzur Rahman

সিএসএস-থ্রি পাবলিশ হওয়ার পর থেকে ওয়েব ডিজাইনারদের এখন আর “ওয়েব সেইফ ফন্টের” উপর নিউর্ভর করতে হয়না। সিএসএস-থ্রি ওয়েব ফন্ট ওয়েব ডিজাইনারদের এমন সব ফন্ট ব্যবহার করার সুযোগ করে দেয় যা ইউজারদের কম্পিউটারে ইন্সটল করা হয়নি। যখনই আপনি ওয়েব পেজে ব্যবহারের জন্য কোন পছন্দসই ফন্ট খুঁজে পাবেন বা কিনবেন, শুধু ফন্ট ফাইলটি ওয়েব সার্ভারে আপলোড করে দেবেন; এটি যখনই প্রয়োজন হবে তখনই ইউজারের ডিভাইসে ডাউনলোড হয়ে যাবে।
সিএসএস-থ্রি @font-face rule রুলের মাধ্যমে আপনার নিজের ফন্টটি নির্দিষ্ট করতে দিতে পারবেন।

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

নিচের নম্বরগুলোর মাধ্যমে এই নিয়মটি প্রথম যে ব্রাউজার ভার্শনগুলো সাপোর্ট করে তার তালিকা প্রকাশ করা হয়েছে।

Property
@font-face	4.0	12.0	9.0	3.5	3.2	10.0

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

ট্রুটাইপ ফন্ট (TTF)

অ্যাপল ও মাইক্রোসফট ১৯৮০ সালে সর্বপ্রথম ট্রুটাইপ ফন্ট স্ট্যান্ডার্ডটি চালু করেছিল। মাইক্রোসফট ও ম্যাক উভয় অপারেটিং সিস্টেমের জন্য সবচেয়ে কমন ফন্ট ফর্মেট হলো ট্রুটাইপ।

ওপেনটাইপ ফন্ট (OTF)

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

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

WOFF ওয়েব পেজে ব্যবহারের উপযোগী একটি ফরমেট। এটি ২০০৯ সালে ডেভলাপ করা হয়েছিল এবং এখন ডব্লিওথ্রিসি’র সুপারিশ করা ফরমেটগুলোর একটি। WOFF হলো কম্প্রেশন ও বাড়তি মেটাডাটা সহ ওপেনটাইপ অথবা ট্রুটাইপ । এর লক্ষ্য হলো ব্যান্ডউইথের সীমারেখার মধ্যেই সার্ভার থেকে ক্লাইয়েন্টের কাছে ফন্ট পৌছে দেয়া।

এসভিজি ফন্ট/শেপ

টেক্সট দেখানোর সময় এটি এসভিজিকে glyphs হিসেবে ব্যবহৃত হতে দেয়। SVG 1.1 স্পেসিফিকেশন একটি এসভিজি ডকুমেন্টের ভেতর ফন্ট তৈরির জন্য একটি ফন্ট মড্যুল নির্দিষ্ট করে দেয়। আপনি এসভিজি ডকুমেন্টের মধ্যেও সিএসএস ডিফাইন করে দিতে পারবেন। এবং @font-face রুলও এসভিজি ডকুমেন্টের টেক্সটের মধ্যে প্রয়োগ করা যায়।

এম্বেডেট ওপেন টাইপ ফন্ট (EOT)

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

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

নিচের নম্বরগুলোর মাধ্যমে ফন্ট ফরমেট প্রথম যে ব্রাউজার ভার্শনগুলো সাপোর্ট করে তার তালিকা প্রকাশ করা হয়েছে।

Font format
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

*ফন্ট ফরমেট তখনি কাজ করে যখন তা “ইন্স” হিসেবে সেট করা হয়।

আপনার পছন্দমতো ফন্ট ব্যবহার করুন

সিএসএস-থ্রি’র @font-face রুলে আপনাকে প্রথমে ফন্টটির একটি নাম ঠিক করে দিতে হবে ( যেমনঃ myFirstFont) এবং তারপর নামটি ফন্টটির দিকে নির্দেশ করে দিতে হবে। ফন্ট এর ইউআরএল লেখার সময় সর্বদা লোয়ার কেস বা ছোট হাতের অক্ষর ব্যবহার করুন। ইন্টারনেট এক্সপ্লোরারে আপার কেস বা বড় হাতের অক্ষর সমস্যা করতে পারে।

একটি এইচটিএমএল এলিমেন্টের জন্য ফন্ট ব্যবহার করতে, ফন্ট ফ্যামিলি প্রপার্টির মাধ্যমে ফন্টের নামের দিকে নির্দেশ করুনঃ

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

div {
    font-family: myFirstFont;
}

বোল্ড টেক্সট ব্যবহার করা

বোল্ড টেক্সট ডেস্ক্রিপ্টরে আপনাকে অবশ্যই আরেকটি @font-face রুল যোগ করে দিতে হবেঃ

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

“sansation_bold.woff” ফাইলটি হলো আরেকটি ফন্ট ফাইল যা স্যানসেশন ফন্টের বোল্ড ক্যারেক্টারগুলো ধারণ করে। “myFirstFont” ফন্ট-ফ্যামিলির’র যেকোন টেক্সটকে ব্রাউজার সবসময় বোল্ড হিসেবে দেখাতে এই ফাইলটিকে ব্যবহার করবে। এভাবে আপনি একই ফন্টের জন্য অনেকগুলো @font-face রুল তৈরি করতে পারেন।

সিএসএস-থ্রি ফন্ট ডেস্ক্রিপটর

নিচের টেবলে @ রুলের ভিতর যেসকল ফন্ট ডেস্ক্রিপটর ডিফাইন করা যায় তার তালিকা দেয়া হয়েছেঃ

font-family -এর ভ্যালু হবে ফন্ট এর নাম। অবশ্যই লাগবে।

src -এটি ফন্টের ইউআরএল; অবশ্যই লাগবে।

font-stretch -এটি অপশনাল। কিভাবে ফন্টটি স্ট্রেচ করা হবে তা ঠিক করে। এর ডিফল্ট ভ্যালু “normal” এর ভ্যালুগুলোর তালিকাঃ