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

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

Adam Argyle

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

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

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

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. প্রতিটি গ্লাইফকে তাদের ডিফল্ট আকার 150% পর্যন্ত স্কেল করতে size-adjust ব্যবহার করে।
3. শুধুমাত্র একক আমদানি করা টাইপফেসকে প্রভাবিত করে।

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

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

বিরামহীন ফন্ট অদলবদল সহ CLS প্রশমিত করা

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

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

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

এই পোস্টের শুরুতে, ফন্টের আকারের সমস্যাটি ট্রায়াল এবং ত্রুটির মাধ্যমে ঠিক করা হয়েছিল। 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. স্থানীয় লক্ষ্য:
   স্থানীয় লক্ষ্য ফন্টের দিকে ডাউনলোড করা ফন্টগুলি সামঞ্জস্য করুন।

উদাহরণ 1: দূরবর্তী লক্ষ্য

নিম্নলিখিত স্নিপেটটি বিবেচনা করুন যা একটি দূরবর্তী 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 ফন্ট চয়ন করুন এবং এটি নির্বিঘ্নে অদলবদল করতে এরিয়ালকে কীভাবে সামঞ্জস্য করতে হয় তা গণনা করবে। এখানে ক্যালকুলেটর থেকে রোবোটো CSS-এর একটি উদাহরণ দেওয়া হল, যেখানে Arial লোড করা হয়েছে এবং "Roboto-fallback" নাম দেওয়া হয়েছে:

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: 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";
}

উদাহরণ 2: স্থানীয় লক্ষ্য

নিচের স্নিপেটটি বিবেচনা করুন যা এরিয়ালের সাথে মেলে একটি ব্র্যান্ড কাস্টম ফন্ট সামঞ্জস্য করে:

@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

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

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

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

descent-override

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

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

লাল শিরোনাম (অনিয়ন্ত্রিত) এর D এবং O বেসলাইনগুলির নীচে স্থান রয়েছে, যখন নীল শিরোনামটি সামঞ্জস্য করা হয়েছে তাই এটির অক্ষরগুলি বেসলাইনে স্থির থাকে৷

line-gap-override

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 ফিচার হল আপনার ওয়েব লেআউটের টেক্সট বাউন্ডিং বক্স কাস্টমাইজ করার একটি উত্তেজনাপূর্ণ উপায় যাতে ফন্ট অদলবদল অভিজ্ঞতা উন্নত করা যায় যাতে আপনার ব্যবহারকারীদের জন্য লেআউট পরিবর্তন এড়ানো যায়। আরও জানতে, এই সংস্থানগুলি দেখুন:

• CSS ফন্ট লেভেল 5 স্পেক
• MDN-এ সাইজ অ্যাডজাস্ট করুন
• বিজোড় সোয়াপ @ফন্ট-ফেস জেনারেটর
• web.dev-এ Cumulative Layout Shift (CLS)
• ফন্ট লোডিং প্রভাব কমানোর একটি নতুন উপায়: CSS ফন্ট বর্ণনাকারী

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