CSS font প্রপার্টিগুলো টেক্সটের চেহারা পরিবর্তন করতে সাহায্য করে। নিচের প্রপার্টিগুলো টেক্সট স্টাইল করতে ব্যবহৃত হয়।
font-family
এই প্রপার্টি এলিমেন্টের জন্য ফন্ট ফেস সেট করতে ব্যবহৃত হয়।
font-kerning
ক্যারেক্টার স্পেসিং ইউনিফর্ম করতে এবং পাঠযোগ্যতা বাড়াতে font-kerning প্রপার্টি ব্যবহার হয়। তবে এই প্রপার্টি ফন্ট-নির্দিষ্ট।
font-size
font-size প্রপার্টি ফন্টের আকার সেট করে।
font-stretch
কিছু ফন্টের অতিরিক্ত ফেস থাকে যেমন condensed, bold ইত্যাদি। font-stretch প্রপার্টি এগুলো নির্দিষ্ট করতে ব্যবহৃত হয়।
font-style
টেক্সটকে একটি কোণে ইটালিক করতে font-style প্রপার্টি ব্যবহার হয়।
font-variant
font-variant ব্যবহার করে একটি এলিমেন্ট स्मল-ক্যাপসে প্রদর্শন করা উচিত কিনা তা নির্দিষ্ট করা যায়।
font-weight
ক্যারেক্টারগুলোর বোল্ডনেস font-weight প্রপার্টি দ্বারা নির্দিষ্ট হয়।
আমরা font প্রপার্টিও ব্যবহার করতে পারি যা উপরের সব প্রপার্টির শর্টহ্যান্ড।
সিনট্যাক্স
font প্রপার্টির সিনট্যাক্স নিচের মতো:
Selector { font: /*value*/ }
নিচের উদাহরণগুলো CSS font প্রপার্টি ব্যাখ্যা করে:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin: 3px; float: left; font-family: "Matura MT Script Capitals"; font-size: 200%; } #a { font-style: normal; } #b { font-style: italic; } #c { font-style: oblique 40deg; font-family: "Harlow Solid Italic"; } </style> </head> <body> <div id="a">Normal Demo</div> <div id="b">Italic Demo</div> <div id="c">Oblique Demo</div> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> * { font-size: 1.1em; list-style: circle; } li:first-child { background-color: seashell; font-family: cursive; } li:nth-child(2) { background-color: azure; font-family: "Brush Script Std", serif; } li:last-child { background-color: springgreen; font-family: "Gigi", Arial; } </style> </head> <body> <h2>Learning Scala</h2> <ul> <li>Scala is a pure object-oriented language in the sense that every value is an object.</li> <li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li> <li>Scala provides a lightweight syntax for defining anonymous functions</li> </ul> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
