CSS ফন্ট মাপ

ফন্ট হাইপার

font-size অ্যাট্রিবিউট ফন্ট হাইপার সেট করা

ওয়েবসাইট ডিজাইনে, টেক্সট হাইপার সমায়োজন করা খুবই গুরুত্বপূর্ণ, কিন্তু ফন্ট হাইপার সমায়োজন করে প্যারাগ্রাফকে শিরোনাম হিসাবে দেখানো বা শিরোনামকে প্যারাগ্রাফ হিসাবে দেখানো হওয়া উচিত নয়

সবসময় সঠিক HTML ট্যাগ ব্যবহার করুন, যেমন <h1> - <h6> শিরোনামের জন্য, <p> শুধুমাত্র প্যারাগ্রাফের জন্য

font-size মাপকে সম্পূর্ণ বা সম্পর্কিত মাপ হতে পারে

সম্পূর্ণ মাপ:

  • টেক্সটকে নির্দিষ্ট হাইপার সেট করা
  • ব্যবহারকারীদের সকল ব্রাউজারে টেক্সট হাইপার সমায়োজন করার অনুমতি নয় (প্রবেশ্যতা খারাপ)
  • যখন আউটপুটের ভৌত মাপ জানা যায়, তখন সম্পূর্ণ মাপ অত্যন্ত উপযোগী

সম্পর্কিত মাপ:

  • আশেপাশের তুলনায় হাইপার সেট করা
  • ব্যবহারকারীদের ব্রাউজারে টেক্সট হাইপার সমায়োজন করার অনুমতি দেওয়া

মন্তব্য：যদি আপনি ফন্ট হাইপার সেট করেনি, তবে সাধারণ টেক্সট (যেমন প্যারাগ্রাফ) এর ডিফল্ট হাইপার 16px (16px = 1em)

পিক্সেলে ফন্ট হাইপার সেট করা

পিক্সেল ব্যবহার করে টেক্সট হাইপার সম্পূর্ণভাবে নিয়ন্ত্রণ করা যেতে পারে：

ইনস্ট্যান্স

h1 {
  font-size: 40px;
}
h2 {
  font-size: 30px;
}
p {
  font-size: 14px;
}

আপনার নিজেই চেষ্টা করুন

টীকা：পিক্সেল ব্যবহার করেছেন তবে, পুরো পেজের হাইপার সাইজ সমায়োজন করার জন্য জুম টুল ব্যবহার করা যেতে পারে

em-এ ফন্ট হাইপার সেট করা

ব্যবহারকারীদের টেক্সট হাইপার সমায়োজন করার জন্য (ব্রাউজার মেনুতে), অনেক ডেভেলপার em-এর বদলে পিক্সেল ব্যবহার করেন

W3C-এর পরামর্শ হল em ইউনিট ব্যবহার করা

1em একই সময়ের ফন্ট হাইপার সমান। ব্রাউজারের ডিফল্ট টেক্সট হাইপার 16px। তাই, ডিফল্ট হাইপার 1em 16px

পিক্সেল থেকে em-এ মাপ করার জন্য এই ফর্মুলা ব্যবহার করা যেতে পারে: pixels/16=em。

ইনস্ট্যান্স

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}
p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

আপনার নিজেই চেষ্টা করুন

এই উদাহরণে, em ইউনিটের টেক্সট হাইপার প্রতিষ্ঠিত প্রথম উদাহরণের পিক্সেল হাইপার সমান

দুর্ভাগ্যবশত, পুরাতন সংস্করণের Internet Explorer-এ এখনও সমস্যা রয়েছে। টেক্সটকে বড় করার সময় তা উচিতই বড় হয়নি, ছোট করার সময় তা আরও ছোট হয়

কম্বয়নের মাধ্যমে প্রতিশত এবং ইম ব্যবহার করা

ইনস্ট্যান্স

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

আপনার নিজেই চেষ্টা করুন

আমাদের কোড এখন সঠিকভাবে চলছে! এটা সব ব্রাউজারে একই টেক্সট মাপ দেখাচ্ছে এবং সব ব্রাউজারকে ফন্ট মাপ সমায়োজন করতে দেয়!

রেসপনসিভ ফন্ট মাপ

ব্যবহার করা যেতে পারে vw ইউনিট সেট টেক্সট মাপ, যার অর্থ “ভিউপট প্রস্থতা” ("viewport width")

এভাবে, টেক্সট মাপ ব্রাউজার উইন্ডোর মাপ অনুসারে থাকবে, ব্রাউজার উইন্ডোর মাপ সমায়োজন করে ফন্ট মাপ কিভাবে মাপা হয় দেখুন:

ইনস্ট্যান্স

<h1 style="font-size:10vw">Hello World</h1>

আপনার নিজেই চেষ্টা করুন

ভিউপট (Viewport) হল ব্রাউজার উইন্ডোর মাপ। 1vw = ভিউপট প্রস্থতার 1％。যদি ভিউপট 50 সেন্টিমিটার প্রস্থতা হয়, তবে 1vw = 0.5 সেন্টিমিটার