সিএসএস (৩) @font-face Rule প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| TTF/OTF | ৪.০ | ৯.৪ | ৩.৫ | ৩.১ | ১০.০ |
| WOFF | ৫.০ | ৯.০ | ৩.৬ | ৫.১ | ১১.১ |
| WOFF2 | ৩৬.০ | সাপোর্ট করে না। | ৩৫.০ | সাপোর্ট করে না। | ২৬.০ |
| SVG | ৪.০ | সাপোর্ট করে না। | সাপোর্ট করে না। | ৩.২ | ৯.০ |
| EOT | সাপোর্ট করে না। | ৬.০ | সাপোর্ট করে না। | সাপোর্ট করে না। | সাপোর্ট করে না। |
সংজ্ঞা ও ব্যবহার
@font-face rule ব্যবহার করে একজন ওয়েব ডিজাইনার নতুন ফন্ট তৈরী করতে পারে।
পরামর্শঃ
- @font-face rule ব্যবহার করে নতুন ফন্ট তৈরী করতে হলে অবশ্যই প্রথমে এর নাম নির্ধারন করতে হবে।
- URL এর জন্য সর্বদা ছোট হাতের অক্ষর লেখতে হয় কারন বড় হাতের অক্ষর ব্যবহার করলে ইন্টারনেট এক্সপ্লোরার ত্রুটি দেখাতে পারে !
- এইচটিএমএল এলিমেন্টে নতুন ফন্টটি ব্যবহার করার জন্য font-family প্রোপার্টি ব্যবহার করা হয় :
div
{
font-family: myFirstFont;
}
নির্দিষ্ট একটি font এর নাম "myFirstFont", এবং font কোথায় পাওয়া যাবে তার URL নির্ধারন করা:
উদাহরণঃ
<!DOCTYPE html>
<html>s
<head>
<ttitle>css reference example<t/title>
<tstyle>
@font-face {
font-family: sattfont;
src: url(sansation_light.woff);}
div {
font-family: sattfont;
}
<t/style>
<t/head>
<tbody>
<tdiv>CSS3 ওয়েবসাইটে প্রাথমিক ভাবে "web-safe" ফন্ট সিলেক্ট করা হয়েছে।<t/div>
<tp><tb>বিশেষ দ্রষ্টব্যঃ<t/b> ইন্টারনেট এক্সপ্লোরার ৮ এবং তার পূর্ববর্তী ভার্সনে font-face rule সাপোর্ট করেনা।(শুধুমাত্র EOT ফরমেট সাপোর্ট করে।)<t/p>
</body>
</html>
ফলাফল
সিনট্যাক্স
@font-face
{
font-properties
}
বোল্ড টেক্সট নির্ধারন করার জন্য আপনাকে অবশ্যই আরও একটি @font-face rule যুক্ত করতে হবে :
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>css reference example</title>
<style>
@font-face {
font-family: sattfont;
src: url(sansation_light.woff);
}
@font-face {
font-family: sattfont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: sattfont;
}
</style>
</head>
<body>
<div>সিএসএস (৩) দ্বারা ওয়েবসাইটের,<b>সর্বশেষ</b> "web-safe"ফন্ট ফ্রী সিলেক্ট করতে পারবেন।</div>
<p><b>বিশেষ দ্রষ্টব্য:</b>ইন্টারনেট ইক্সপ্লোয়ার ৮ এবং তার পূর্বের ভার্সনে
@font-face rule with প্রপাটি সার্পোট করে না ( শুধ মাএ EOT ফরমের্টি সাপোট করবে )।</p>
</body>
</html>
ফলাফল
@font-face প্রোপার্টির ভ্যালু-সমূহ
- 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: ফন্টের স্টাইল নির্বাচন করুন।
- font-weight -normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900: ফন্টের বোল্ড নির্বাচন করুন।
- unicode-range -unicode-range: unicode characters এ অতিরিক্ত ফন্ট সাপোর্ট দেয়ার জন্য এটি ব্যবহার হয়। ডিফল্ট ভ্যালু "U+0-10FFFF"হয় ।