CSS ফন্ট-আকারের বৈশিষ্ট্য আপনার পৃষ্ঠা বা ওয়েবসাইটের যেকোনো পাঠ্য উপাদানের ফন্টের আকার সেট করে। ফন্ট-আকারের বৈশিষ্ট্যটি পাঠ্য বিষয়বস্তু অন্তর্ভুক্ত যেকোন শ্রেণি, আইডি বা উপাদানে প্রয়োগ করা যেতে পারে। সম্পত্তি px, em, rem, vw, vh, এবং কীওয়ার্ড ব্যবহার করে মান গ্রহণ করে।
বেশিরভাগ ডেভেলপার একটি ওয়েব পেজ স্টাইল করার জন্য বিভিন্ন ফন্টের আকারের সংমিশ্রণ ব্যবহার করে। উদাহরণস্বরূপ, একজন ওয়েব ডেভেলপার শিরোনামের জন্য একটি বড় ফন্ট এবং বডি টেক্সট এবং অন্যদের জন্য একটি ছোট ফন্ট ব্যবহার করতে পারে। অনেকেই প্রশ্ন করেন:আপনি কিভাবে CSS বা HTML-এ ফন্ট সাইজ পরিবর্তন করবেন?
CSS font-Size প্রপার্টি ডেভেলপারদের একটি ওয়েব পৃষ্ঠায় একটি অনুচ্ছেদ বা পাঠ্যের লাইনে ফন্টের আকার সেট করতে দেয়৷
এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করে, কিভাবে font-Size ব্যবহার করতে হয় সম্পত্তি এই নির্দেশিকাটির মাধ্যমে যাওয়া আপনাকে পাঠ্যের আকার পরিবর্তনে বিশেষজ্ঞ হতে দেয়৷
CSS font-Size
উপযুক্ত ফন্ট স্টাইলিং ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ। স্টাইল না করা টেক্সট দর্শকদের মধ্যে পড়ার অসুবিধা সৃষ্টি করে, যা প্রায় অবশ্যই একটি অপ্রীতিকর ওয়েবসাইট অভিজ্ঞতার পরিণতি ঘটায়।
ফন্টের জন্য অনেক CSS শৈলী রয়েছে যেগুলি কীভাবে পাঠ্য প্রদর্শিত হবে তা কাস্টমাইজ করতে ব্যবহার করা যেতে পারে, যেমন ফন্ট-ওজন, ফন্ট-পরিবার, পাঠ্য-সজ্জা এবং রঙ। আরেকটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল ফন্ট-সাইজ, যা পাঠ্যের একটি ব্লকে একটি ফন্টের আকার নিয়ন্ত্রণ করে।
CSS font-Size-এর সিনট্যাক্স সম্পত্তি হল:
font-size: sizeValue;
sizeValue ফন্ট সাইজ আপনি টেক্সট একটি ব্লক ব্যবহার করতে চান. পাঠ্যের একটি ব্লক দ্বারা ব্যবহৃত ফন্টের আকার নির্দিষ্ট করার বিভিন্ন উপায় রয়েছে। এই নিবন্ধে আমরা যে পদ্ধতিগুলি নিয়ে আলোচনা করতে যাচ্ছি তা হল:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
- পিক্সেল
- em
- root em
- ভিউপোর্ট ইউনিট
- কীওয়ার্ড
আসুন আমরা একটি ওয়েব পৃষ্ঠায় প্রতিটি ফন্ট সাইজ পদ্ধতি ব্যবহার করার একটি উদাহরণ অন্বেষণ করি।
পিক্সেল ব্যবহার করে ফন্টের আকার সেট করুন
একটি ফন্টের আকার সেট করার সবচেয়ে সাধারণ উপায়গুলির মধ্যে একটি হল পিক্সেল ব্যবহার করা৷
৷পিক্সেলগুলি পরিমাপের একটি ভাল ইউনিট কারণ তারা আপনাকে সুনির্দিষ্ট হতে দেয়। পিক্সেল ইউনিট অপারেটিং সিস্টেম বা ওয়েব ব্রাউজার দ্বারা প্রভাবিত হয় না। এক স্ক্রীনে একটি পিক্সেল আরেকটিতে একটি পিক্সেল। আপনার নির্দিষ্ট করা পিক্সেল মানটি বিভিন্ন ব্রাউজারে মোটামুটি একইভাবে প্রদর্শিত হবে।
যাইহোক, পাঠ্যের একটি ব্লকে একটি ফন্টের আকার সেট করতে পিক্সেল ব্যবহার করার একটি সীমাবদ্ধতা রয়েছে:অ্যাক্সেসযোগ্যতা। পিক্সেল ব্যবহার করে সংজ্ঞায়িত ফন্টের আকার অ্যাক্সেসযোগ্য নয় কারণ কিছু ব্রাউজার ব্যবহারকারীদের ফন্টের আকার কাস্টমাইজ করার অনুমতি দেয় না। দৃষ্টি প্রতিবন্ধী ব্যবহারকারীরা, উদাহরণস্বরূপ, ফন্টের আকার নির্ধারণ করতে পিক্সেল ব্যবহার করে এমন একটি সাইট ব্যবহার করতে সমস্যা হতে পারে।
ধরা যাক আমরা 28px ফন্ট সাইজ সহ একটি ওয়েবসাইট তৈরি করছি সকলের জন্য <h1> উপাদান এবং 12px সকলের জন্য <p> উপাদান আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
h1 { font-size: 28px; }
p ( font-size: 12px; }
আমাদের কোডে, আমরা একটি CSS নির্বাচক ব্যবহার করেছি সমস্ত <h1> ফন্ট সাইজ সেট করে। 28px এ উপাদান এবং সমস্ত <p> 12px এ উপাদান . নিম্নলিখিত স্নিপেট দেখায় কিভাবে এই উপাদানগুলি আমাদের নতুন ফন্ট আকারের সাথে প্রদর্শিত হয়:
<style>
h1 { font-size: 28px; }
p { font-size: 12px; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
ems ব্যবহার করে ফন্ট সাইজ সেট করুন
CSS-এ ফন্টের আকার নির্ধারণের আরেকটি সাধারণ উপায় হল em আকার ব্যবহার করা। পরিমাপের এম ইউনিট একটি অভিভাবক উপাদানের হরফের আকারকে বোঝায়। আপনি যদি একটি ফন্টের আকার 2em সেট করেন , ফন্টের আকার মূল উপাদানের দ্বিগুণ হবে।
ems সহ CSS ফন্ট সাইজিংয়ের একটি উদাহরণ
উদাহরণস্বরূপ, ধরুন আপনার একটি বাক্সে সংরক্ষিত পাঠ্যের একটি অনুচ্ছেদ রয়েছে। বাক্সের ফন্ট সাইজ হল 20px . আপনি যদি 1em পাঠ্যের অনুচ্ছেদের ফন্ট সাইজ নির্দিষ্ট করেন , অনুচ্ছেদের ফন্ট সাইজ হবে 20px . এটি প্যারেন্ট এলিমেন্টের ফন্ট সাইজের সমান।
আপনি যদি একটি অভিভাবক উপাদানের জন্য একটি ফন্টের আকার সেট না করে থাকেন তবে ব্রাউজারটি সেই ব্রাউজারের জন্য নির্দিষ্ট করা ডিফল্ট মান ব্যবহার করবে। এটি সাধারণত 16px হয় . ফলস্বরূপ, আপনি যদি কোনো ফন্টের আকার নির্দিষ্ট না করে থাকেন, 1em ডিফল্টরূপে 16px , 2em ডিফল্টরূপে 32px .
ধরুন আমাদের ওয়েব পেজের ফন্ট সাইজ হল 16px . আমরা চাই যে টেক্সটের সমস্ত অনুচ্ছেদ সেই ফন্ট সাইজ ব্যবহার করে উপস্থিত হোক, যার মানে আমাদের মান 1em ব্যবহার করা উচিত। . এছাড়াও, আমরা চাই যে আমাদের সমস্ত শিরোনাম 24px ফন্ট সাইজের সাথে দেখা যাক , যা 1.5em এর সমান .
আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
p { font-size: 1em; }
h1 { font-size: 1.5em; }
আমাদের কোডে, সমস্ত অনুচ্ছেদের আকার হবে 16px (1em =16px ডিফল্টরূপে), এবং সমস্ত <h1> উপাদান হবে 24px (1.5em =24px )
ওয়েব পৃষ্ঠায় আমাদের পাঠ্যটি কীভাবে প্রদর্শিত হবে তা এখানে:
<style>
p { font-size: 1em; }
h1 { font-size: 1.5em; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
উপরের উদাহরণে, আপনি আমাদের <h1> উভয়ের জন্য নতুন স্টাইল দেখতে পারেন এবং <p> উপাদান।
আপনি মনে রাখবেন যে যদি আমাদের <h1> একটি বাক্সের মধ্যে উপস্থিত হয়েছে যার আরেকটি ফন্টের আকার ছিল, আমাদের <h1> এর আকার পরিবর্তন হবে. এর কারণ হল এম মানগুলি তাদের পিতামাতার ফন্টের আকারের উত্তরাধিকারী হয়৷
রুট এম ব্যবহার করে ফন্ট সাইজ সেট করুন
রুট এমের জন্য সংক্ষিপ্ত, rem CSS3-এ পরিমাপের একটি নতুন একক যা ফন্টের আকার সেট করতে ব্যবহার করা যেতে পারে। rem ব্যবহার করে মান রুট <html> এর সাথে আপেক্ষিক উপাদান, মূল উপাদানের পরিবর্তে।
rem মানগুলি দরকারী কারণ তারা আপনাকে সম্পূর্ণ নথির সাথে সম্পর্কিত একটি মান নির্দিষ্ট করতে দেয়৷ এইভাবে, মূল উপাদানটির আলাদা em মান থাকলে আপনার পাঠ্যের আকার প্রভাবিত হবে না।
ধরুন আমাদের 16px এর ডিফল্ট ফন্ট সাইজ সহ একটি ওয়েব পেজ আছে . আমাদের আগের উদাহরণের মত, আমরা সব চাই <h1> 24px এ প্রদর্শিত হবে এবং সমস্ত অনুচ্ছেদ 16px-এ প্রদর্শিত হবে . আমরা নিম্নলিখিত কোড ব্যবহার করে এই ফন্ট সাইজ সেট করতে পারি:
<style>
p { font-size: 1rem; }
h1 { font-size: 1.5rem; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
আমাদের কোড প্রায় আমাদের আগের উদাহরণের মতই। একমাত্র পার্থক্য হল আমরা যে পরিমাপের একক ব্যবহার করি তা হল rem em এর পরিবর্তে . এই উদাহরণে, আমাদের ফন্টের আকার এখনও 24px হবে এবং 16px যথাক্রমে শীর্ষ-স্তরের শিরোনাম এবং অনুচ্ছেদের জন্য। কারণ আমাদের ওয়েব পেজের ডিফল্ট ফন্ট সাইজ হল 16px .
কীওয়ার্ড ব্যবহার করে ফন্ট সাইজ সেট করুন
CSS-এ ফন্টের আকার সেট করতে আপনি দুই ধরনের কীওয়ার্ড ব্যবহার করতে পারেন।
সম্পূর্ণ কীওয়ার্ডগুলি একটি ফন্টের আকার সেট করতে ব্যবহৃত হয় যা ওয়েব পৃষ্ঠায় পরিবর্তন নির্বিশেষে একই থাকে। নিখুঁত ফন্ট সাইজ সেট করতে আপনি যে কীওয়ার্ডগুলি ব্যবহার করতে পারেন তা হল:
xx-small(9px)x-small(10px)small(13px)medium(16px)large(18px)x-large(24px)xx-large(32px)
বন্ধনীতে উল্লিখিত মানগুলি একটি ব্রাউজারের উপর ভিত্তি করে যার ডিফল্ট ফন্ট সাইজ হল 16px .
আপেক্ষিক কীওয়ার্ড, অন্যদিকে, একটি ফন্টের আকার সেট করে যা ওয়েব পৃষ্ঠার অন্য কোথাও ফন্টের আকারের উপর নির্ভর করে পরিবর্তিত হবে। আপেক্ষিক কীওয়ার্ডগুলি আপনি ব্যবহার করতে পারেন:ছোট এবং বড়৷ এই কীওয়ার্ডগুলি দরকারী কারণ এগুলি আপনাকে পৃষ্ঠার অন্যান্য ফন্টের আকার পরিবর্তনের সাথে সাথে আপনার ফন্টের আকার পরিবর্তন করতে দেয়৷
ধরুন আমরা সকল <h2> এর সাইজ সেট করতে চাই 24px একটি পৃষ্ঠার উপাদান (x-বড়) এবং সমস্ত <h3> 18px এ উপাদান (বড়)। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
<style>
h2 { font-size: x-large; }
h3 { font-size: large; }
</style>
<html>
<h2>This is a heading.</h2>
<p>This is some paragraph text.</p>
<h3>This is a lower-level heading.</h3>
<p>This is some more paragraph text.</p>
</html>
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের <h2> ফন্টের আকার এবং <h3> ট্যাগগুলি হল 24px এবং 18px , যথাক্রমে। যাইহোক, আমরা পিক্সেল ব্যবহার করে এই আকারগুলি নির্দিষ্ট করিনি। পরিবর্তে, আমরা ব্রাউজার দ্বারা অফার করা ডিফল্ট ফন্ট সাইজ কীওয়ার্ড ব্যবহার করেছি৷
ভিউপোর্ট ইউনিট ব্যবহার করে ফন্টের আকার সেট করুন
ভিউপোর্ট ইউনিটগুলি ব্রাউজারের ভিউপোর্ট আকারের শতাংশ হিসাবে গণনা করা হয়। CSS দ্বারা সমর্থিত দুটি ভিউপোর্ট ইউনিট হল:ভিউ উচ্চতা (vh ) এবং প্রস্থ দেখুন (vw )।
কারণ ভিউপোর্ট ইউনিট হল ব্রাউজারের ভিউপোর্ট সাইজের একটি শতাংশ, 1vh যেমন ভিউপোর্ট উচ্চতার 1% এর সমান। সুতরাং, আপনার যদি 1000px চওড়া ভিউপোর্ট থাকে, 1vh 10px সমান।
ভিউপোর্ট ইউনিট ব্যবহার করা উপকারী কারণ আপনি ব্রাউজার উইন্ডোর আকার পরিবর্তন করার সাথে সাথে আপনার ফন্টের আকার পরিবর্তন হবে। এটি, পরিবর্তে, আপনাকে বিভিন্ন ব্রাউজার এবং ডিভাইসের আকারের সাথে অভিযোজিত একটি আরও অ্যাক্সেসযোগ্য ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে দেয়৷
ধরুন আমরা এমন একটি সাইট তৈরি করতে চেয়েছিলাম যার শিরোনামগুলি ভিউপোর্টের প্রস্থের 4% এবং যার অনুচ্ছেদগুলি ভিউপোর্টের প্রস্থের 1%। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
<style>
p { font-size: 1vw; }
h1 { font-size: 4vw; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আপনি যদি ব্রাউজারটির আকার পরিবর্তন করেন তবে এই শিরোনামগুলির আকার পরিবর্তন হবে৷
উপসংহার
ফন্টের আকার পরিবর্তন করতে সিএসএস (এবং তাই এইচটিএমএল) এ ফন্ট-আকার বৈশিষ্ট্য ব্যবহার করা হয়। এটি পরিমাপের একাধিক একক গ্রহণ করে যেখানে ফন্টের আকারগুলি পিক্সেল, এম, রেম, কীওয়ার্ড এবং ভিউপোর্ট ইউনিট সহ প্রদর্শিত হতে পারে। এটি সিএসএস ক্লাস এবং আইডিতে প্রয়োগ করা যেতে পারে, সেইসাথে উপাদানগুলিতেও।
এই টিউটোরিয়ালটি CSS ফন্টের আকারের মৌলিক বিষয়গুলির মধ্য দিয়ে হেঁটেছে। এখন আপনি একজন বিশেষজ্ঞের মতো ফন্ট-সাইজ অ্যাট্রিবিউট ব্যবহার শুরু করতে প্রস্তুত৷
৷