বিভিন্ন ফন্ট ফ্যামিলি মিক্স করার সময়, যেমন ইনলাইন কোড স্নিপেট যোগ করার সময় অথবা বিভিন্ন থিমের জন্য ফন্ট ফ্যামিলি পরিবর্তন করার সময়, "x-উচ্চতা" (ছোট হাতের অক্ষরের উচ্চতা) আলাদা হওয়ার কারণে একটি ফন্ট অন্য ফন্টের চেয়ে অনেক ছোট বা বড় দেখাতে পারে। এর ফলে লেআউট শিফট হতে পারে এবং টেক্সট পড়তে অসুবিধা হতে পারে।
font-size-adjust প্রপার্টি আপনাকে নির্দিষ্ট ফন্ট মেট্রিকের (সাধারণত x-উচ্চতা) উপর ভিত্তি করে ফন্টের সাইজ অ্যাডজাস্ট করার মাধ্যমে টেক্সটের ভিজ্যুয়াল সাইজ স্বাভাবিক করতে দেয়।
প্রয়োগ করার বিভিন্ন ধাপ
- বাধ্যতামূলক: যেসব এলিমেন্টে ফন্টের সামঞ্জস্যতা অত্যন্ত গুরুত্বপূর্ণ, যেমন ওয়েব ফন্ট ব্যবহার করা কন্টেনার বা মিক্সড ফন্ট ফ্যামিলি সহ ব্লক, সেখানে
font-size-adjustপ্রয়োগ করুন। - বাধ্যতামূলক: নেস্টেড এলিমেন্টের ফন্ট সাইজ প্রাইমারি ফন্টের অনুপাতের সাথে অটোমেটিক ম্যাচ করতে এলিমেন্টে
from-fontকীওয়ার্ড ব্যবহার করুন। - বাধ্যতামূলক:
font-size-adjust-এর জন্য একটি নির্দিষ্ট সংখ্যাসূচক অ্যাস্পেক্ট-রেশিও ওভাররাইড ভ্যালু ব্যবহার করুন (যেমন,font-size-adjust: 0.5) যাতে ফন্টের অনুপাত বিভিন্ন থিম থেকে নেওয়া হলে অনুপাতকে স্বাধীনভাবে স্বাভাবিক করা যায়।
যেমন: অটোমেটিক x-উচ্চতা স্বাভাবিক করা
from-font ব্যবহার করা হল সবচেয়ে শক্তিশালী পদ্ধতি। এটি প্রথম উপলভ্য ফন্ট থেকে x-উচ্চতার অ্যাস্পেক্ট রেশিও এক্সট্র্যাক্ট করে এবং চাইল্ড এলিমেন্টের ফন্টে তা প্রয়োগ করে।
.content-area {
font-family: "MyCustomWebFont";
/* Automatically extract and apply x-height ratio from MyCustomWebFont */
font-size-adjust: from-font;
}
.content-area span{
font-family: "MyOtherCustomWebFont"
}
উদাহরণ: নির্দিষ্ট x-উচ্চতা উল্লেখ করা
যে ফন্ট অ্যাডজাস্ট করতে হবে সেটি যদি সাইজের ভিত্তি হিসেবে ব্যবহৃত ফন্টের চাইল্ড না হয়, তাহলে x-উচ্চতা অ্যাডজাস্ট করার জন্য একটি মান উল্লেখ করুন।
.theme{
font-family: Verdana, sans-serif;
}
.theme.alternate{
font-family: Times;
/* Set to the aspect ratio (x-height / font-size) of the primary font */
font-size-adjust: 0.51;
}
ফলব্যাক স্ট্র্যাটেজি
বাধ্যতামূলক: যেসব ব্রাউজারে font-size-adjust কাজ করে না, সেখানে ফন্ট তার স্বাভাবিক font-size ভ্যালুতে রেন্ডার হবে। এটি প্রশমিত করার জন্য আপনাকে অবশ্যই @supports ব্লক ব্যবহার করে কাজ না করা ব্রাউজারের জন্য একটি সঠিক ফলব্যাক স্ট্র্যাটেজি প্রদান করতে হবে:
font-size-adjustসাপোর্ট শনাক্ত করতে@supports not (font-size-adjust: from-font)ব্যবহার করুন এবং ফলব্যাক স্টাইল (যেমন, অ্যাডজাস্ট করা লাইন-উচ্চতা বা ফন্ট-সাইজ) প্রদান করুন।- আপনার প্রাথমিক ফন্টের মতো একই x-উচ্চতা সহ ফন্ট বেছে নিন।
- বিকল্প ও নেস্টেড ফন্ট ফ্যামিলির জন্য নির্দিষ্ট
font-sizeওline-heightওভাররাইড প্রয়োগ করুন।
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
.content-area {
/* Manual adjustment for browsers without support (if needed) */
line-height: 1.6;
font-size: 1.2rem;
}
}