CSS বেসিক শেখার সময়, আমরা বক্স মডেল, পৃষ্ঠায় উপাদানগুলি কীভাবে অবস্থান করতে হয় এবং ফন্ট-ফ্যামিলি এবং ফন্টের আকারের মতো ডিজাইন সিস্টেম উপাদানগুলির উপর ফোকাস করি। পৃষ্ঠায় ফন্টটি কীভাবে দেখায় তা যদি আমরা আরও গভীরে প্রবেশ করি, তাহলে আমাদের ফন্ট-কারনিং, অক্ষর-ব্যবধান এবং শব্দ-ব্যবধান বৈশিষ্ট্যের দিকে নজর দিতে হবে। এই সূক্ষ্ম বিবরণ যা একটি ওয়েবসাইটকে গড় থেকে পেশাদারে নিয়ে যাবে।
ফন্ট কার্নিং
ফন্ট-কার্নিং হল কিভাবে দুটি স্বতন্ত্র অক্ষরের মধ্যে ব্যবধান নির্ধারণ করা হয়। যে হরফগুলিকে ভাল-কার্নড হিসাবে বিবেচনা করা হয় সেগুলি অক্ষরগুলির মধ্যে আরও অভিন্ন ব্যবধানের কারণে আরও ভাল দৃষ্টি আকর্ষণ করে। CSS ফন্ট-কারিং প্রপার্টির তিনটি সম্ভাব্য মান রয়েছে:কোনটিই, স্বাভাবিক, স্বয়ংক্রিয় .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#nokern {
font-kerning: none;
}
#kern {
font-kerning: normal;
}
</style>
</head>
<body>
<div id="kern">AV Ta</div>
<div id="nokern">AV Ta</div>
</body>
</html>
স্বয়ংক্রিয় ফন্ট-কারিং ব্যবহার করা উচিত কিনা তা নির্ধারণ করে। কিছু ব্রাউজার ছোট ফন্টগুলিতে কার্নিং অক্ষম করবে কারণ MDN অনুসারে পাঠযোগ্যতা ক্ষতিগ্রস্ত হবে। স্বাভাবিক মানে ফন্টে থাকলে কার্নিং প্রয়োগ করা হবে – কোনটিই না অবশ্যই মানে কার্নিং প্রয়োগ করা হবে না। উপরের সম্পাদকে কোডটি চালান। আপনি 'AV' এবং 'Ta'-তে সবচেয়ে বেশি দৃশ্যমান CSS প্রপার্টি দেখতে পাবেন। একটি সেরিফের শেষ থেকে পরবর্তী বর্ণের সেরিফের শুরু পর্যন্ত ব্যবধান নির্ধারণ করে যে পাঠ্যটিতে কার্নিং প্রয়োগ করা হয়েছে কিনা।
অক্ষর-স্পেসিং
কার্নিংয়ের বিপরীতে, অক্ষর-স্পেসিং বৈশিষ্ট্য হল পাঠ্যের একটি লাইনের সমস্ত অক্ষর জুড়ে অভিন্ন ব্যবধান। এটি একটি দৈর্ঘ্য লাগে৷ px, rem, বা em-তে মান। এই মানগুলি ইতিবাচক বা নেতিবাচক হতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#big-spacing {
letter-spacing:5px;
}
#little-spacing {
letter-spacing: 1px;
}
</style>
</head>
<body>
<div id="little-spacing">Hello World</div>
<div id="big-spacing">Hello World</div>
</body>
</html>
শব্দ-ব্যবধান
ঠিক অক্ষর ব্যবধানের মতো, শব্দ-ব্যবধানের আক্ষরিক অর্থ হল শব্দগুলির মধ্যে ফাঁকাকরণ৷৷ ডিফল্ট 0.25em, কিন্তু একটি ইতিবাচক বা নেতিবাচক দৈর্ঘ্য নিতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing</title>
<style>
div {
font-size: 2rem;
font-family: serif;
}
#big-spacing {
word-spacing:5rem;
}
#little-spacing {
word-spacing: 1rem;
}
</style>
</head>
<body>
<div id="little-spacing">Hello World</div>
<div id="big-spacing">Hello World</div>
</body>
</html>
এই নিবন্ধে আমরা ফন্ট-কার্নিং এবং অক্ষর ব্যবধানের পাশাপাশি অক্ষর ব্যবধান এবং শব্দ ব্যবধানের মধ্যে পার্থক্য শিখেছি। এই সমস্ত বৈশিষ্ট্যের জন্য ব্রাউজার সমর্থন ব্যাপক। ইন্টারনেট এক্সপ্লোরারে ফন্ট কার্নিং পাওয়া যায় না।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
