CSS @font-face নিয়ম

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

বর্ণনা ও ব্যবহার

@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" হতে হবে).

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