ফন্ট-সাইজ প্রপার্টি

font-size প্রপার্টিটি টেক্সটের ফন্টের আকার সেট করে। প্রপার্টির মান হিসাবে যেকোনো আকারের একক (সাধারণত px, em বা rem) বা বিশেষ কীওয়ার্ড ব্যবহার করা হয় (অত্যন্ত বিরলভাবে ব্যবহৃত)।

সিনট্যাক্স

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

কীওয়ার্ড হিসাবে মান

মান	বর্ণনা
`xx-small`	সবচেয়ে সবচেয়ে ছোট। উদাহরণ: Lorem ipsum dolor sit amet।
`x-small`	সবচেয়ে ছোট। উদাহরণ: Lorem ipsum dolor sit amet।
`small`	ছোট। উদাহরণ: Lorem ipsum dolor sit amet।
`medium`	মধ্যম। উদাহরণ: Lorem ipsum dolor sit amet।
`large`	বড়। উদাহরণ: Lorem ipsum dolor sit amet।
`x-large`	খুব বড়। উদাহরণ: Lorem ipsum dolor sit amet।
`xx-large`	সবচেয়ে বড়। উদাহরণ: Lorem ipsum dolor sit amet।
`larger`	প্যারেন্টের ফন্টের চেয়ে কিছুটা বড়।
`smaller`	প্যারেন্টের ফন্টের চেয়ে কিছুটা ছোট।

ডিফল্ট মান: medium।

উদাহরণ

আসুন প্যারাগ্রাফের ফন্টের আকার 20px এ সেট করি:

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

cssp {
  font-size: 20px;
}

Результат:

উদাহরণ

এই উদাহরণে, প্যারাগ্রাফের জন্য আকার 16px এবং এর ভিতরের span এর জন্য - 150% সেট করা হয়েছে। এই ক্ষেত্রে, span এর ফন্টের আকার হবে তার প্যারেন্টের, অর্থাৎ প্যারাগ্রাফের, 150%, এবং এর প্রকৃত আকার হবে 16px * 150% = 24px:

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

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

উদাহরণ

এই উদাহরণে, প্যারাগ্রাফের জন্য আকার 16px এবং এর ভিতরের span এর জন্য - larger সেট করা হয়েছে। এই ক্ষেত্রে, span এর ফন্টের আকার হবে তার প্যারেন্ট (প্যারাগ্রাফ) এর চেয়ে বড়:

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

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

উদাহরণ

দয়া করে লক্ষ্য করুন যে ভিন্ন font-family এবং একই font-size সহ ফন্টগুলি দৃশ্যত একই আকারের নাও হতে পারে (এই সমস্যার সমাধানের জন্য font-size-adjust প্রপার্টি দেখুন)।

নিচের উদাহরণে উভয় প্যারাগ্রাফের font-size 16px এ সেট করা হয়েছে, কিন্তু ভিন্ন font-family দেওয়া হয়েছে:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: