@font-face-এর জন্য CSS সাইজ-অ্যাডজাস্ট

ওয়েব ফন্ট লোড হওয়ার সময়, আপনি এখন এটির স্কেল অ্যাডজাস্ট করতে পারবেন, যাতে ডকুমেন্টের ফন্ট সাইজ নরমালাইজ করা যায় এবং ফন্ট পরিবর্তন করার সময় লেআউট শিফ্ট হওয়া আটকানো যায়

Adam Argyle

নিম্নলিখিত ডেমো বিবেচনা করুন যেখানে font-size হল একটি সামঞ্জস্যপূর্ণ 64px এবং এই প্রতিটি হেডারের মধ্যে একমাত্র পার্থক্য হল font-family। বাঁদিকের উদাহরণগুলি অ্যাডজাস্ট করা হয়নি এবং সেগুলির চূড়ান্ত সাইজ সামঞ্জস্যপূর্ণ নয়। ডানদিকের উদাহরণে size-adjust ব্যবহার করা হয়েছে যাতে 64px-এর সাইজ সব জায়গায় একই থাকে।

এই উদাহরণে, উচ্চতা দেখানোর জন্য Chrome DevTools CSS গ্রিড লেআউট ডিবাগ টুল ব্যবহার করা হয়েছে।

এই পোস্টে নতুন CSS ফন্ট-ফেস ডেসক্রিপ্টর সম্পর্কে আলোচনা করা হয়েছে, যার নাম size-adjust। এছাড়াও, এটি ব্যবহারকারীর আরও মসৃণ অভিজ্ঞতা, সামঞ্জস্যপূর্ণ ডিজাইন সিস্টেম এবং আরও অনুমানযোগ্য পৃষ্ঠার লেআউটের জন্য ফন্টের সাইজ সংশোধন এবং স্বাভাবিক করার কয়েকটি উপায় প্রদর্শন করে। একটি গুরুত্বপূর্ণ ব্যবহারিক উদাহরণ হল, কিউমুলেটিভ লেআউট শিফ্ট (CLS) প্রতিরোধ করার জন্য ওয়েব ফন্ট রেন্ডারিং অপ্টিমাইজ করা।

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

সমস্যার স্পেসের একটি ইন্ট্যার‍্যাক্টিভ ডেমো এখানে দেওয়া হল। ড্রপডাউন থেকে টাইপফেস পরিবর্তন করে দেখুন এবং লক্ষ্য করুন:

  1. ফলাফলে উচ্চতার পার্থক্য।
  2. কন্টেন্ট শিফ্ট করার সময় ভিজ্যুয়াল জার্কিং।
  3. ইন্টার‍্যাক্টিভ টার্গেট এরিয়া সরানো (ড্রপডাউন এদিক ওদিক লাফায়!)।

size-adjust-এর সাথে ফন্ট কীভাবে স্কেল করবেন

সিনট্যাক্সের সাথে পরিচয়:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. Adjusted Typeface নামের কাস্টম টাইপফেস তৈরি করে।
  2. প্রতিটি গ্লিফকে তার ডিফল্ট সাইজের ১৫০% পর্যন্ত স্কেল আপ করতে size-adjust ব্যবহার করে।
  3. শুধুমাত্র ইমপোর্ট করা একটি টাইপফেসের উপর প্রভাব ফেলে।

উপরের কাস্টম টাইপফেস এইভাবে ব্যবহার করুন:

h1 {
  font-family: "Adjusted Typeface";
}

নিরবচ্ছিন্ন ফন্ট সোয়াপিংয়ের মাধ্যমে CLS কমানো

নিচের GIF-এ, বাঁদিকে উদাহরণ দেখুন এবং ফন্ট পরিবর্তন করা হলে কীভাবে শিফ্ট হয় তা দেখুন। এটি একটি মাত্র শিরোনাম এলিমেন্ট সহ একটি ছোট উদাহরণ এবং সমস্যাটি খুব সহজেই চোখে পড়ে।

বাঁদিকের উদাহরণে লেআউট শিফ্ট আছে, ডানদিকেরটিতে নেই।

ফন্ট রেন্ডারিং উন্নত করার জন্য, একটি দুর্দান্ত কৌশল হল ফন্ট সোয়াপিং। প্রথমে কন্টেন্ট দেখানোর জন্য দ্রুত লোড হয় এমন সিস্টেম ফন্ট রেন্ডার করুন, তারপর ওয়েব ফন্ট লোড হয়ে গেলে সিস্টেম ফন্টটি ওয়েব ফন্ট দিয়ে পাল্টে দিন। এটি আপনাকে দুটি জগতেরই সেরাটি দেয়: কন্টেন্ট যত তাড়াতাড়ি সম্ভব দৃশ্যমান হয় এবং আপনি ব্যবহারকারীর কন্টেন্ট দেখার সময় নষ্ট না করেই একটি সুন্দর স্টাইল করা পৃষ্ঠা পান। তবে সমস্যা হল, কখনও কখনও ওয়েব ফন্ট লোড হওয়ার সময়, এটি সম্পূর্ণ পৃষ্ঠাকে সরিয়ে দেয়, কারণ এটি সামান্য আলাদা বক্সের উচ্চতার সাইজে উপস্থাপিত হয়।

ফন্ট সোয়্যাপ করার সময় কন্টেন্ট বেশি থাকলে লেআউট শিফ্ট হওয়ার সম্ভাবনাও বেশি থাকে

@font-face নিয়মে size-adjust যোগ করার মাধ্যমে, এটি ফন্ট ফেসের জন্য গ্লোবাল গ্লিফ অ্যাডজাস্টমেন্ট সেট করে। সঠিক সময়ে এটি করলে, ভিজ্যুয়াল পরিবর্তন খুব কম হবে এবং নির্বিঘ্নে অদলবদল করা যাবে। নির্বিঘ্নে অদলবদল করতে, ম্যানুয়ালি অ্যাডজাস্ট করুন অথবা Malte Ubl-এর তৈরি করা এই সাইজ-অ্যাডজাস্ট ক্যালকুলেটর ব্যবহার করে দেখুন।

Google ওয়েব ফন্ট বেছে নিন, আগে থেকে অ্যাডজাস্ট করা @font-face স্নিপেট ফিরে পান।

এই পোস্টের শুরুতে, ফন্ট সাইজ সংক্রান্ত সমস্যার সমাধান ট্রায়াল ও এররের মাধ্যমে করা হয়েছিল। size-adjust-কে সোর্স কোডে ততক্ষণ পর্যন্ত নাজ করা হয়েছে যতক্ষণ না Cookie এবং Arial-এ একই হেডার একই 64px রেন্ডার করেছে, যেমন Press Start 2P স্বাভাবিকভাবে করেছে। আমি দুটি ফন্টকে একটি টার্গেট ফন্ট সাইজে অ্যালাইন করেছি।

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

ফন্ট ক্যালিব্রেট করা হচ্ছে

লেখক হিসেবে আপনি ফন্ট স্কেল স্বাভাবিক করার জন্য ক্যালিব্রেশন টার্গেট নির্ধারণ করেন। আপনি Times, Arial বা সিস্টেম ফন্ট ব্যবহার করতে পারেন, তারপর কাস্টম ফন্ট অ্যাডজাস্ট করে সেটির সাথে ম্যাচ করাতে পারেন। অথবা, আপনি যা ডাউনলোড করেন তার সাথে ম্যাচ করার জন্য স্থানীয় ফন্ট অ্যাডজাস্ট করতে পারেন।

size-adjust ক্যালিব্রেশনের জন্য স্ট্র্যাটেজি:

  1. রিমোট টার্গেট:
    ডাউনলোড করা ফন্টের সাথে লোকাল ফন্ট অ্যাডজাস্ট করুন।
  2. স্থানীয় টার্গেট:
    স্থানীয় টার্গেট ফন্টের দিকে ডাউনলোড করা ফন্ট অ্যাডজাস্ট করুন।

উদাহরণ ১: রিমোট টার্গেট

নিম্নলিখিত স্নিপেটটি বিবেচনা করুন যা স্থানীয়ভাবে উপলভ্য ফন্টকে সাইজে অ্যাডজাস্ট করে একটি রিমোট src কাস্টম ফন্টের সাথে ম্যাচ করে। একটি রিমোট কাস্টম ফন্ট হল ক্যালিব্রেশনের লক্ষ্য, সম্ভবত একটি ব্র্যান্ড ফন্ট:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

এই উদাহরণে, লোড করা কাস্টম ফন্টের প্রত্যাশায় লোকাল ফন্ট Arial অ্যাডজাস্ট করা হচ্ছে, যাতে নির্বিঘ্নে সোয়্যাপ করা যায়।

এই স্ট্র্যাটেজির সুবিধা হল, ডিজাইনার ও ডেভেলপারদের সাইজিং ও টাইপোগ্রাফির জন্য একই ফন্ট অফার করা হয়। ব্র্যান্ডটি হল ক্যালিব্রেশন টার্গেট। এটি ডিজাইন সিস্টেমের জন্য দারুণ খবর।

ব্র্যান্ড টাইপফেসকে টার্গেট হিসেবে সেট করাও মাল্টের ক্যালকুলেটর কীভাবে কাজ করে তার একটি উদাহরণ। একটি Google Font বেছে নিন এবং এটি গণনা করবে যে কীভাবে Arial-কে নির্বিঘ্নে এটির সাথে অদলবদল করতে হবে। ক্যালকুলেটর থেকে Roboto CSS-এর একটি উদাহরণ এখানে দেওয়া হল, যেখানে Arial লোড করা হয়েছে এবং "Roboto-fallback" নাম দেওয়া হয়েছে:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

সম্পূর্ণ ক্রস প্ল্যাটফর্ম অ্যাডজাস্টমেন্ট তৈরি করতে, নিম্নলিখিত উদাহরণটি দেখুন যা ব্র্যান্ড ফন্টের প্রত্যাশায় ২টি অ্যাডজাস্ট করা লোকাল ফলব্যাক ফন্ট প্রদান করে।

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

উদাহরণ ২: লোকাল টার্গেট

Arial-এর সাথে ম্যাচ করার জন্য ব্র্যান্ড কাস্টম ফন্ট অ্যাডজাস্ট করে এমন নিম্নলিখিত স্নিপেট বিবেচনা করুন:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

এই স্ট্র্যাটেজির সুবিধা হল, কোনও অ্যাডজাস্টমেন্ট ছাড়াই রেন্ডার করা যায়, তারপর ইনকামিং ফন্ট অ্যাডজাস্ট করে ম্যাচ করা যায়।

ascent-override, descent-override ও line-gap-override-এর সাথে আরও সূক্ষ্ম টিউনিং

গ্লিফের জেনেরিক স্কেলিং আপনার ডিজাইন বা লোডিং স্ট্র্যাটেজির জন্য যথেষ্ট অ্যাডজাস্টমেন্ট না হলে, এখানে কিছু ফাইন টিউনিং বিকল্প রয়েছে যা size-adjust-এর সাথে কাজ করে। ascent-override, descent-override এবং line-gap-override প্রপার্টি বর্তমানে Chromium 87+ এবং Firefox 89+ ভার্সনে প্রয়োগ করা হয়েছে।

শব্দ ওভাররাইডের উপরে ও নিচে কাঁচি, যে অংশগুলি ফিচারটি ট্রিম করতে পারে তা প্রদর্শন করে

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

ascent-override বর্ণনাকারী ফন্টের বেসলাইনের উপরে উচ্চতা নির্ধারণ করে।

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

লাল রঙের হেডলাইনের (অ্যাডজাস্ট না করা) বড় হাতের A ও O অক্ষরের উপরে ফাঁকা জায়গা আছে, অন্যদিকে নীল রঙের হেডলাইন অ্যাডজাস্ট করা হয়েছে যাতে এর বড় হাতের অক্ষরের উচ্চতা বাউন্ডিং বক্সের সাথে ফিট করে।

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

descent-override বর্ণনাকারী ফন্টের বেসলাইনের নিচে উচ্চতা নির্ধারণ করে।

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

লাল রঙের হেডলাইনের (অ্যাডজাস্ট করা হয়নি) D ও O-এর নিচে বেসলাইন আছে, অন্যদিকে নীল রঙের হেডলাইন অ্যাডজাস্ট করা হয়েছে যাতে অক্ষরগুলি বেসলাইনের সাথে সুন্দরভাবে ফিট করে।

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari Technology Preview: supported.

Source

line-gap-override ডেসক্রিপ্টর ফন্টের জন্য লাইন-গ্যাপ মেট্রিক নির্ধারণ করে। এটি হল ফন্টের জন্য সাজেস্ট করা লাইন-গ্যাপ বা এক্সটার্নাল লিডিং।

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

লাল রঙের হেডলাইনে (অ্যাডজাস্ট করা হয়নি) কোনও line-gap-override নেই, এটি আসলে 0%-এ রয়েছে, অন্যদিকে নীল রঙের হেডলাইনটি ৫০% উপরে অ্যাডজাস্ট করা হয়েছে, যার ফলে অক্ষরের উপরে ও নিচে সেই অনুযায়ী স্পেস তৈরি হয়েছে।

সবগুলি একসাথে রাখা হচ্ছে

এইসব ওভাররাইডের প্রতিটি, ওয়েবের নিরাপদ টেক্সট বাউন্ডিং বক্স থেকে অতিরিক্ত অংশ ট্রিম করার অতিরিক্ত উপায় অফার করে। সঠিক উপস্থাপনার জন্য আপনি টেক্সট বক্স কাস্টমাইজ করতে পারেন।

উপসংহার

@font-face size-adjust CSS ফিচার হল আপনার ওয়েব লেআউটের টেক্সট বাউন্ডিং বক্স কাস্টমাইজ করার একটি দারুণ উপায়, যার মাধ্যমে ফন্ট সোয়াপিংয়ের অভিজ্ঞতা উন্নত করা যায় এবং আপনার ব্যবহারকারীদের জন্য লেআউট শিফ্ট এড়ানো যায়। আরও জানতে, এইসব রিসোর্স দেখুন: