কিভাবে CSS ফন্ট-ভেরিয়েন্ট ব্যবহার করতে হয় তা জানুন আপনার পাঠ্যের জন্য ছোট ক্যাপ অক্ষর ব্যবহার করার সম্পত্তি — এবং আপনার আদৌ ছোট ক্যাপ ব্যবহার করা উচিত কিনা।
CSS font-variant সম্পত্তি আপনার টেক্সট প্রদর্শন একটি সাধারণ টেক্সট কেস বা একটি ছোট ক্যাপ ফন্ট হিসাবে নির্দিষ্ট করে। সম্পত্তির তিনটি মান আছে:
- স্বাভাবিক (ডিফল্ট টেক্সট কেস)
- উত্তরাধিকার
- স্মল-ক্যাপস
মৌলিক ব্যবহার:
.small-caps {
font-variant: small-caps;
}
আপনি font-variant ব্যবহার শুরু করার আগে সম্পত্তি নিশ্চিত করুন, আপনি বুঝতে পারছেন কি, কখন, এবং কিভাবে এটি সঠিকভাবে ব্যবহার করতে হয় (অনেকে করে না)।
সাধারণ পাঠ্য এবং ছোট ক্যাপগুলির মধ্যে পার্থক্য সংজ্ঞায়িত করে শুরু করা যাক:
- সাধারণ টেক্সট কেস, যাকে সেন্টেন্স কেসও বলা হয়, মানে এই বাক্যের মতো নিয়মিত টেক্সট, যেখানে একটি বাক্যের প্রথম শব্দের প্রথম অক্ষরটি বড় করা হয়।
- ছোট ক্যাপগুলি হল ছোট বড় হাতের অক্ষরগুলির সাথে মিশ্রিত করার জন্য ডিজাইন করা বড় হাতের অক্ষর (একটি অনুরূপ x-উচ্চতা ব্যবহার করে)।
দুর্ভাগ্যবশত, অনেক ওয়েব ফন্টে বাস্তব নেই ছোট ক্যাপ।
আপনি যদি আপনার কোনো পাঠ্য font-variant: small-caps; এ সেট করেন আপনি হয় পাবেন:
- খুব সুন্দর, যত্ন সহকারে ডিজাইন করা ছোট-ক্যাপ যা আপনার স্বাভাবিক/বাক্য কেস টেক্সটের সাথে মসৃণভাবে মিশে যায়, যেমন আপনি আগে দেখেছেন উদাহরণ 👌
- ভুল কম্পিউটার-জেনারেটেড ছোট-ক্যাপ যা আপনার স্বাভাবিক/বাক্য কেস টেক্সটের সাথে ভালভাবে মিশে না — এবং আপনাকে অ-পেশাদার দেখায় 😒
আসল ছোট ক্যাপ উদাহরণ
এখানে একটি বাস্তব এর একটি উদাহরণ ছোট ক্যাপ ফন্ট যা স্বাভাবিক/বাক্য ক্ষেত্রের সাথে পুরোপুরি মিশে যায়:
উপরের উদাহরণে এটি এত ভালোভাবে কাজ করার কারণ হল যে ফন্ট ফ্যামিলি, Alegreya, real প্রদান করে ছোট ক্যাপ।
জাল ছোট ক্যাপ উদাহরণ
এখানে একটি নকল ছোট-ক্যাপ ফন্টের একটি উদাহরণ:
খেয়াল করুন কিভাবে এই ছোট ক্যাপগুলো স্বাভাবিকভাবে নিয়মিত টেক্সট কেসের সাথে মিশে যায় না।
উপরের উদাহরণটিও Alegreya ব্যবহার করছে, তবে আমি Alegreya SC ফন্ট ফেসটি নিষ্ক্রিয় করেছি যাতে আপনি দেখতে পারেন এটি নকল ছোট ক্যাপ ফন্টের সাথে কেমন দেখাচ্ছে৷
font-variant: small-caps দিয়ে আপনার টেক্সট কেমন হবে তা কী নির্ধারণ করে আপনার পছন্দের টাইপফেস (ফন্ট ফ্যামিলি) বাস্তব প্রদান করে কিনা ছোট টুপিগুলো.
দুর্ভাগ্যবশত, বাস্তব ছোট ক্যাপ বিরল। তাই আগে font-variant: small-caps ব্যবহার করার কথা ভাবুন আপনার CSS স্টাইলশীটে, নিম্নলিখিতগুলি করুন:
- আপনার টাইপফেসে সত্যিকারের ছোট-ক্যাপ আছে কিনা তা গবেষণা করুন (যদি এটি থাকে তবে এটি টাইপফেস ডিজাইনার দ্বারা নির্দিষ্ট করা হয়েছে। এটি দেখুন।)
- যদি এটি থাকে, নিশ্চিত করুন যে সেগুলি সঠিকভাবে সক্রিয় করা হয়েছে৷ ৷
অন্যথায়, এই সম্পত্তি ব্যবহার সম্পর্কে ভুলবেন না.
ভাগ্যক্রমে, font-variant বৈশিষ্ট্য স্বয়ংক্রিয়ভাবে ফন্টে OpenType ছোট ক্যাপগুলি অ্যাক্সেস করবে যদি সেগুলি বিদ্যমান থাকে। যাইহোক, আপনাকে এখনও আপনার প্রকল্পে সেগুলি আমদানি করতে হবে (যেমন আপনি আপনার অন্যান্য ফন্টগুলি আমদানি করেন)। যদি আপনি না করেন, তাহলে font-variant সম্পত্তি কম্পিউটার-উত্পাদিত আবর্জনা ছোট ক্যাপগুলিকে ফলব্যাক হিসাবে ব্যবহার করবে — যা আপনি চান না৷
