CSS-এ ফন্ট শর্টহ্যান্ড প্রপার্টি

পূর্ববর্তী পাঠে আমরা টেক্সটের জন্য অনেকগুলি প্রপার্টি নিয়ে আলোচনা করেছি। প্রায়শই এই প্রতিটি প্রপার্টি আলাদাভাবে নির্দিষ্ট করা যথেষ্ট শ্রমসাধ্য হয়, সুতরাং আরও সুবিধার জন্য CSS-তে একটি বিশেষ শর্টহ্যান্ড প্রপার্টি রয়েছে font। এই প্রপার্টিটি একই সাথে ফন্টের আকার, পরিবার, ওজন, ইটালিক এবং লাইন-হাইট সেট করতে দেয়।

বর্ণিত প্রপার্টির সিনট্যাক্স নিম্নরূপ:

font-style font-weight font-size / line-height font-family

এক্ষেত্রে প্রপার্টিগুলির ক্রম গুরুত্বপূর্ণ, এবং আবশ্যক হল font-size এবং font-family। লক্ষ্য করুন যে উপরের সিনট্যাক্সে বর্ণিত প্রপার্টিগুলি ছাড়া অন্য কোন প্রপার্টি, এই শর্টহ্যান্ড প্রপার্টিটির অন্তর্ভুক্ত নয়।

আসুন উদাহরণ দেখি।

উদাহরণ

ধরুন আমাদের নিম্নলিখিত স্টাইলগুলি রয়েছে:

p {
	font-size: 16px;
	font-family: Arial;
}

আসুন শর্টহ্যান্ড প্রপার্টি ব্যবহার করে এগুলি পুনরায় লিখি:

p {
	font: 16px Arial;
}

উদাহরণ

ধরুন আমাদের নিম্নলিখিত স্টাইলগুলি রয়েছে:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

আসুন শর্টহ্যান্ড প্রপার্টি ব্যবহার করে এগুলি পুনরায় লিখি:

p {
	font: 16px/50px Arial;
}

উদাহরণ

ধরুন আমাদের নিম্নলিখিত স্টাইলগুলি রয়েছে:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

আসুন শর্টহ্যান্ড প্রপার্টি ব্যবহার করে এগুলি পুনরায় লিখি:

p {
	font: bold 16px Arial;
}

উদাহরণ

ধরুন আমাদের নিম্নলিখিত স্টাইলগুলি রয়েছে:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

আসুন শর্টহ্যান্ড প্রপার্টি ব্যবহার করে এগুলি পুনরায় লিখি:

p {
	font: bold italic 16px/50px Arial;
}

ব্যবহারিক সমস্যা

শর্টহ্যান্ড প্রপার্টি ব্যবহার করে কোডটি সংক্ষিপ্ত করুন font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

শর্টহ্যান্ড প্রপার্টি ব্যবহার করে কোডটি সংক্ষিপ্ত করুন font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

শর্টহ্যান্ড প্রপার্টি ব্যবহার করে কোডটি সংক্ষিপ্ত করুন font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}