@ফন্ট-ফেস-এর জন্য CSS আকার-সামঞ্জস্য করুন

একটি ওয়েব ফন্ট লোড হওয়ার সাথে সাথে, আপনি এখন এর স্কেল সামঞ্জস্য করতে পারেন, যাতে ডকুমেন্টের ফন্টের আকার স্বাভাবিক হয় এবং ফন্টগুলির মধ্যে স্যুইচ করার সময় লেআউট পরিবর্তন রোধ করা যায়।

Adam Argyle

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

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

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

1. ফলাফলে উচ্চতার পার্থক্য।
2. দৃশ্যত বিব্রতকর বিষয়বস্তু পরিবর্তন।
3. ইন্টারেক্টিভ টার্গেট এলাকাগুলি সরানো হচ্ছে (ড্রপডাউনটি এদিক-ওদিক লাফিয়ে লাফিয়ে উঠছে!)।

মূল শব্দ: ফন্ট ফ্যামিলি বনাম টাইপফেস: একটি টাইপফেসকে তার পরিবারের নাম এবং তার ফন্ট ফেস দিয়ে উল্লেখ করা হয়। Helvetica Bold নির্দিষ্ট বোল্ড টাইপফেসকে বোঝায় যখন Helvetica ​​সাধারণভাবে 8+ টাইপফেসের পুরো পরিবারকে বোঝায় (সাধারণ, বোল্ড, ইটালিক, ইত্যাদি)। CSS @font-face এর মাধ্যমে আপনি টাইপফেস নিয়ে কাজ করবেন, যদিও এগুলি ব্যবহার করার জন্য আপনাকে font-family লিখতে হবে।

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";
}

সতর্কতা: উপরের ডেমোতে দ্বিতীয় শিরোনামটি যদি প্রথমটির চেয়ে বড় না হয়, তাহলে আপনার ব্রাউজার size-adjust সমর্থন করে না।

নিরবচ্ছিন্ন ফন্ট অদলবদলের মাধ্যমে CLS প্রশমন করা

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

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

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

ফন্ট অদলবদলের সময় আরও কন্টেন্টের পরিমাণ আরও বেশি সম্ভাব্য লেআউট পরিবর্তনের সমান

@font-face নিয়মে size-adjust বসানোর মাধ্যমে, এটি ফন্ট ফেসের জন্য একটি বিশ্বব্যাপী গ্লিফ সমন্বয় সেট করে। এই ডানদিকের সময় নির্ধারণ করলে ন্যূনতম দৃশ্যমান পরিবর্তন হবে, একটি নিরবচ্ছিন্ন সোয়াপ। একটি নিরবচ্ছিন্ন সোয়াপ তৈরি করতে, হাত দিয়ে সমন্বয় করুন অথবা Malte Ubl এর এই size-adjust ক্যালকুলেটরটি চেষ্টা করে দেখুন।

একটি গুগল ওয়েব ফন্ট বেছে নিন, একটি পূর্বে-সমন্বিত @font-face স্নিপেট ফিরে পান।

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

@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');
}

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

লেখক হিসেবে আপনি ফন্ট স্কেল স্বাভাবিক করার জন্য ক্যালিব্রেশন লক্ষ্য(গুলি) নির্ধারণ করেন। আপনি টাইমস, এরিয়াল, অথবা কোনও সিস্টেম ফন্টে স্বাভাবিক করতে পারেন, তারপর কাস্টম ফন্টগুলি সামঞ্জস্য করতে পারেন। অথবা, আপনি যা ডাউনলোড করেন তার সাথে মিল রেখে স্থানীয় ফন্টগুলি সামঞ্জস্য করতে পারেন।

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 একটি লোড করা কাস্টম ফন্টের প্রত্যাশায় সামঞ্জস্য করছে, একটি নির্বিঘ্ন অদলবদলের জন্য।

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

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

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

সতর্কতা: font-family ক্রম অত্যন্ত গুরুত্বপূর্ণ। এখানেই ক্রম এবং অগ্রাধিকার গুরুত্বপূর্ণ। আপনি যে টাইপফেসটি সবচেয়ে বেশি চান তা প্রথমে নিশ্চিত করুন। তদুপরি, আপনার সমস্ত ব্যবহারকারীর ডিভাইসে local(Arial) উপলব্ধ নাও হতে পারে, তাই ফন্ট-ফ্যামিলিতে একাধিক ফলব্যাক প্রদান করা গুরুত্বপূর্ণ।

সম্পূর্ণ ক্রস প্ল্যাটফর্ম সমন্বয় তৈরি করতে, নিম্নলিখিত উদাহরণটি দেখুন যা একটি ব্র্যান্ড ফন্টের প্রত্যাশায় 2টি সামঞ্জস্যপূর্ণ স্থানীয় ফলব্যাক ফন্ট প্রদান করে।

@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

• 87
• 87
• 89
• x

Source

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

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

লাল শিরোনাম (অপরিবর্তিত) এর বড় অক্ষর A এবং O এর উপরে স্থান রয়েছে, যখন নীল শিরোনামটি সামঞ্জস্য করা হয়েছে যাতে এর ক্যাপের উচ্চতা সামগ্রিক বাউন্ডিং বাক্সের সাথে ঠিকভাবে ফিট করে।

descent-override

Browser Support

• 87
• 87
• 89
• x

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

• 87
• 87
• 89
• x

Source

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

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

লাল শিরোনামে (অসমন্বয়িত) কোনও line-gap-override নেই, মূলত এটি 0% এ, যেখানে নীল শিরোনামটি 50% দ্বারা সামঞ্জস্য করা হয়েছে, সেই অনুযায়ী অক্ষরের উপরে এবং নীচে স্থান তৈরি করে।

সবকিছু একসাথে করা

এই প্রতিটি ওভাররাইড ওয়েবের নিরাপদ টেক্সট বাউন্ডিং বক্স থেকে অতিরিক্ত ছাঁটাই করার একটি অতিরিক্ত উপায় প্রদান করে। আপনি সুনির্দিষ্ট উপস্থাপনার জন্য টেক্সট বক্সটি তৈরি করতে পারেন।

সতর্কতা: যদি উপরের কোনও ডেমোতে পার্থক্য না দেখায়, তাহলে আপনার ব্রাউজার ওভাররাইড সমর্থন করে না।

উপসংহার

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

• সিএসএস ফন্ট লেভেল ৫ স্পেক
• MDN-এ আকার সমন্বয়
• সিমলেস সোয়াপ @ফন্ট-ফেস জেনারেটর
• web.dev-এ ক্রমযোজিত লেআউট শিফট (CLS)
• ফন্ট লোডিং প্রভাব কমানোর একটি নতুন উপায়: সিএসএস ফন্ট বর্ণনাকারী

আনস্প্ল্যাশে ক্রিস্টিয়ান স্ট্র্যান্ডের ছবি