CSS @font-face রুল

  • পূর্ববর্তী পৃষ্ঠা font
  • পরবর্তী পৃষ্ঠা font-family

সংজ্ঞা ও ব্যবহার

@font-face রুলের মাধ্যমে, Web ডিজাইনাররা এখন কোনও "নিরাপদ" ফন্ট ব্যবহার করতে হবে না

@font-face রুলের মধ্যে, আপনাকে প্রথমেই ফন্টের নাম (যেমন myFirstFont) নির্দিষ্ট করতে হবে, এরপর ফন্ট ফাইলের দিক নির্দিষ্ট করুন

টিপপত্র:ফন্টের URL-টি ছোট অক্ষরে ব্যবহার করুন।বড় অক্ষরগুলি IE-তে অপ্রত্যাশিত ফলাফল সৃষ্টি করতে পারে!

ফন্টটি HTML ইউনিটের জন্য ব্যবহার করতে, font-family এপ্রোপার্টির মাধ্যমে ফন্টের নাম (myFirstFont) উল্লেখ করুন:

div {
  font-family: myFirstFont;
}

আরও দেখুন:

CSS শিক্ষাদীক্ষা:CSS Web ফন্ট

উদাহরণ

নাম "myFirstFont" এর একটি ফন্ট নির্দিষ্ট করুন এবং যেখানে তা পাওয়া যাবে এর URL নির্দিষ্ট করুন:

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

আপনার নিজেই প্রয়োগ করুন

আরও TIY ইনস্ট্যান্সগুলি পানোর জন্য পানের নিচে পাবেন

CSS গ্রামার

@font-face {
  font-properties
}
ফন্ট ডিসক্রিপ্টর মান বর্ণনা
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"

আরও উদাহরণ

উদাহরণ

আপনাকে একটি অন্য এটি @font-face রুল যোগ করতে হবে, যার মধ্যে বোল্ড টেক্সটের বর্ণনা থাকবে:

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

আপনার নিজেই প্রয়োগ করুন

ফাইল "sansation_bold.woff" একটি অন্য ফন্ট ফাইল, যার মধ্যে Sansation ফন্টের বোল্ড অ্যাকর্ডেন্ট রয়েছে

যখন ফন্ট ফ্যামিলি "myFirstFont"-এর একটি টেক্সটকে বোল্ড হিসাবে প্রদর্শন করা হবে, তখন ব্রাউজার তা ব্যবহার করবে

এভাবে, একই ফন্টের জন্য বেশ কয়েকটি @font-face রুল সেট করা যায়

ব্রাউজার সমর্থন

Internet Explorer, Firefox, Opera, Chrome এবং Safari সকলেই @font-face রুল সমর্থন করে

টেবিলের সংখ্যাগুলি পূর্ণাধিকার ফন্ট ফরম্যাট সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে

ফন্ট ফরম্যাট
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG সমর্থিত নয় সমর্থিত নয় সমর্থিত নয় 3.2 সমর্থিত নয়
EOT 6.0 সমর্থিত নয় সমর্থিত নয় সমর্থিত নয় সমর্থিত নয়

* Edge এবং IE: ফন্ট ফরম্যাট শুধুমাত্র "installable" হলেই কার্যকরি

* Firefox: ডিফল্টে নিষ্ক্রিয় থাকে, কিন্তু সক্ষম করা যায় (WOFF2 ব্যবহারের জন্য flag-কে "true" হতে হবে).

  • পূর্ববর্তী পৃষ্ঠা font
  • পরবর্তী পৃষ্ঠা font-family