ভিজ্যুয়ালি স্টেবল ফন্ট ফলব্যাক

ওয়েব ফন্ট লোড হওয়ার সময়, সেটি প্রায়ই এমন একটি ফলব্যাক ফন্ট দিয়ে প্রতিস্থাপিত হয় যার ডাইমেনশন আলাদা, এমনকি দুটিই একই font-size-এ সেট করা থাকলেও। এর ফলে "লেআউট শিফ্ট" (Cumulative Layout Shift) হয় এবং ফলব্যাক ফন্টের ছোট হাতের অক্ষর (x-উচ্চতা) পছন্দের ফন্টের থেকে উল্লেখযোগ্যভাবে আলাদা হলে টেক্সট পড়া যায় না।

font-size-adjust প্রপার্টি একটি নির্দিষ্ট মেট্রিকের (সাধারণত x-উচ্চতা) উপর ভিত্তি করে ফন্টের সাইজ স্বাভাবিক করে এই সমস্যার সমাধান করে, যাতে বর্তমানে কোন ফন্ট অ্যাক্টিভ আছে তা নির্বিশেষে টেক্সট একই ভিজ্যুয়াল স্পেস দখল করে।

প্রয়োগ করার বিভিন্ন ধাপ

১. আপনার পছন্দের ফন্টের অ্যাস্পেক্ট রেশিও শনাক্ত করুন

ফলব্যাক স্বাভাবিক করতে, আপনার প্রাথমিক ফন্টের "অ্যাসপেক্ট ভ্যালু" (ফন্ট সাইজের সাথে ছোট হাতের অক্ষরের অনুপাত) প্রয়োজন।

• অটোমেটিক ডিসকভারি (সাজেস্ট করা): আপনার প্রাথমিক ওয়েব ফন্ট থেকে অনুপাত বের করার জন্য ব্রাউজারকে অনুমতি দিতে from-font কীওয়ার্ড ব্যবহার করুন।
• ম্যানুয়াল গণনা: আপনি যদি নির্দিষ্ট মান জানেন (যেমন, Verdana-এর জন্য ০.৫৪৫), তাহলে আরও সুনির্দিষ্ট নিয়ন্ত্রণের জন্য আপনি সরাসরি এটি প্রদান করতে পারেন।

২. টেক্সট কন্টেনারে font-size-adjust প্রয়োগ করুন

এলিমেন্ট বা মূল কন্টেনারে প্রপার্টি প্রয়োগ করুন। এটি নিশ্চিত করে যে প্রাইমারি ফন্ট লোড না হলে বা লোড হওয়ার প্রসেসে থাকলে, ফলব্যাক ফন্ট প্রাইমারি ফন্টের ভিজ্যুয়াল সাইজের সাথে ম্যাচ করার জন্য স্কেল করা হয়।

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

৩. (ঐচ্ছিক) নির্দিষ্ট মেট্রিকের জন্য অ্যাডজাস্ট করুন

x-উচ্চতা ডিফল্ট এবং সবচেয়ে সাধারণ হলেও, আপনি cap-height (সব বড় হাতের অক্ষরে লেখা হেডারের জন্য উপযোগী) বা ch-width (মনোস্পেসড ফন্টের জন্য উপযোগী)-এর মতো অন্যান্য মেট্রিক ব্যবহার করে নরমালাইজ করতে পারেন।

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

৪. ভিজ্যুয়াল স্টেবিলিটি যাচাই করা

font-size-adjust ভ্যালু যাতে ফলব্যাকের সাথে সঠিকভাবে অ্যালাইন করা থাকে তা নিশ্চিত করুন। আপনি সাময়িকভাবে ওয়েব ফন্ট ব্লক করে বা আপনার ব্রাউজারের DevTools-এ font-family ডিক্লারেশন অ্যাডজাস্ট করে এবং টেক্সট লেআউট স্থিতিশীল আছে কিনা তা যাচাই করে এটি পরীক্ষা করতে পারেন।

ফলব্যাক স্ট্র্যাটেজি

যেসব ব্রাউজারে font-size-adjust কাজ করে না, সেখানে ফন্ট ডিফল্ট স্কেলে রেন্ডার করা হবে। এর ফলে ফন্ট সোয়াপ করার সময় লেআউট শিফ্ট হতে পারে বা রিডেবিলিটিতে পরিবর্তন হতে পারে।

font-size-adjust ছাড়া এটি প্রশমিত করতে, আপনি ফলব্যাক ফন্ট ম্যানুয়ালি টিউন করতে @font-face ডেসক্রিপ্টর size-adjust, ascent-override এবং descent-override ব্যবহার করতে পারেন, যদিও এগুলি একটি font-size-adjust মানের চেয়ে গণনা করা আরও জটিল।