ওয়েব ডিজাইন CSS Part-5 ( Fonts) - প্রিয়লেখা

ওয়েব ডিজাইন CSS Part-5 ( Fonts)

Md. Sajal
Published: September 19, 2016

Fonts:

কোন ওয়েব সাইটে তথ্য প্রদর্শনের ক্ষেত্রে প্রধান ভূমিকা পালন করে Text। HTML এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে CSS  গুরত্বপূর্ন। Text এর  স্টাইল তৈরির জন্য বেশ কয়েকটি Properties উল্লেখ করতে হয়। এগুলো হচ্ছে-

  • Font family
  • Font size
  • Font variant
  • font-weight

Font Family
font-family প্রোপার্টিজ দিয়ে এলিমেন্টের font কি হবে সেটা ঠিক করা যায়। টেক্সট সমূহের জন্য Arial  ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial; একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।

font-family: Verdana, SolaimanLipi;

Font Size
font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের Text এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমন-

font-size: 20px;
/*or*/
font-size: 2em;

Font Weight

font-weight  কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য font-weight ব্যবহার করা হয়। এর মান হতে পারে “normal”, “bold”, “bolder”, “lighter”, “inherit” এবং 100, 200, 300 …900 পর্যন্ত। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়।

Font Style

font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়।

font-style: italic;
font-style: oblique;
font-style: normal;
font-style: inherit;

Project:

এই খানে  internal css  দিয়ে project  দেখান হল । External css  এর জন্য css টুকু style.css  নিয়ে গেলেই  হবে আর  html file a link করে দিতে হবে-

<!DOCTYPE html >
<html>
<head>
<title> background </title>
<style>
# demo {
font-size: 20px;
font-family: Verdana, SolaimanLipi;
font-weight: bold;
}
h1{
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body >
<h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h1>
<p id=”demo “>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br />
</p>
</body>
</html>