ফন্ট-ফ্যামিলি প্রপার্টি

font-family প্রপার্টি ফন্টের ধরন সেট করে।

সিনট্যাক্স

cssসিলেক্টর {
  font-family: ফন্টের নাম;
}

মন্তব্য

যদি ফন্টের নামে স্পেস থাকে, উদাহরণস্বরূপ, Times New Roman, তাহলে এটি সিঙ্গেল বা ডাবল কোটেশনের মধ্যে আবদ্ধ থাকতে হবে।

মন্তব্য

কমা দিয়ে একাধিক সদৃশ ফন্ট তালিকাভুক্ত করা যায়। ব্রাউজার যখন তালিকায় প্রথম ফন্টটি পায়, তখন এটি ব্যবহারকারীর কম্পিউটারে এর উপস্থিতি পরীক্ষা করে। যদি এমন ফন্ট না থাকে, তাহলে পরবর্তী ফন্টটি তালিকা থেকে নেওয়া হয় এবং উপস্থিতি বিশ্লেষণ করা হয়। তাই একাধিক ফন্ট সম্ভাবনা বাড়িয়ে দেয় যে অন্তত একটি ক্লায়েন্ট কম্পিউটারে খুঁজে পাওয়া যাবে।

তালিকা সাধারণত একটি কীওয়ার্ড দিয়ে শেষ করা হয়, যা ফন্টের ধরন বর্ণনা করে (সমস্ত ফন্ট কোনো না কোনো ধরনের অন্তর্গত) - serif, sans-serif, cursive, fantasy বা monospace। যদি ব্রাউজার ব্যবহারকারীর কম্পিউটারে উল্লিখিত কোনো ফন্ট খুঁজে না পায়, তাহলে এটি উল্লিখিত ধরনের একটি ফন্ট বেছে নেবে।

ফন্টের ধরন

ডিফল্ট মান: ব্রাউজারে ডিফল্টভাবে সেট করা ফন্ট। সাধারণত এটি Times New Roman।

উদাহরণ

ফন্টের পরিবার হিসাবে Arial নির্ধারণ করি:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: Arial;
}

Результат:

উদাহরণ

ফন্টের পরিবার হিসাবে Times New Roman নির্ধারণ করি। যেহেতু ফন্টের নামটি একাধিক শব্দ নিয়ে গঠিত, তাই এটিকে কোটেশনের মধ্যে নিতে হবে:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: "Times New Roman";
}

Результат:

উদাহরণ

ফন্টের জন্য serif গ্রুপের একটি ফন্ট নির্ধারণ করি (সবচেয়ে সম্ভাব্য যে Times New Roman নেওয়া হবে):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: serif;
}

Результат:

উদাহরণ

ফন্টের জন্য sans-serif গ্রুপের একটি ফন্ট নির্ধারণ করি (সবচেয়ে সম্ভাব্য যে Arial নেওয়া হবে):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: sans-serif;
}

Результат:

উদাহরণ

ফন্টের জন্য fantasy গ্রুপের একটি ফন্ট নির্ধারণ করি (আপনার কম্পিউটারে কাজ নাও করতে পারে due to absence such font):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: fantasy;
}

Результат:

উদাহরণ

ফন্টের জন্য monospace গ্রুপের একটি ফন্ট নির্ধারণ করি (অক্ষরগুলি একই আকারের হবে):

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-family: monospace;
}

Результат: