CSS ফন্ট-সাইজ-অ্যাডজাস্ট এখন বেসলাইনে রয়েছে

ব্রাউজার সমর্থন

  • 127
  • 127
  • 3
  • 16.4

উৎস

CSS font-size-adjust প্রপার্টি আজ ক্রোমে আসে এবং নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে যায়। ফলব্যাক ফন্টগুলি লোড হওয়ার সময় এই বৈশিষ্ট্যটি আপনার লেআউটের স্থানান্তর রোধ করতে এবং ছোট ফন্ট আকারে ফলব্যাক ফন্টগুলির স্পষ্টতা নিশ্চিত করতে সহায়তা করতে পারে। font-size-adjust প্রপার্টি ইন্টারপ 2024- এর অংশ, তাই ওয়েব প্ল্যাটফর্মের আন্তঃকার্যক্ষমতা উন্নত করার প্রচেষ্টার জন্য এটি আরেকটি জয়।

সমস্যাটি

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

Verdana এবং Arial-এ টেক্সট 16px এ প্রদর্শিত হয়।

আকারের পার্থক্য এই সত্যের জন্য দায়ী যে ফন্টের মধ্যে বড় হাতের অক্ষরের সাথে তুলনা করার সময় আকৃতির মান , ছোট হাতের অক্ষরগুলির উচ্চতা ফন্টের মধ্যে পরিবর্তিত হয়।

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

font-size-adjust কিভাবে সাহায্য করে

font-size-adjust প্রপার্টি আপনাকে প্রথম ফন্টের সাথে ভালোভাবে মেলে আপনার ফলব্যাক ফন্ট সামঞ্জস্য করতে দেয়। নিম্নলিখিত উদাহরণটি পূর্বে দেখানো দুটি ফন্ট দেখায়, এবার দ্বিতীয় ফন্টটি প্রথমটির সাথে মেলানোর জন্য সামঞ্জস্য করা হয়েছে।

font-size-adjust ব্যবহার করে।

এই উদাহরণটি একটি একক মান ব্যবহার করে, একটি সংখ্যা, যা ex-height ডিফল্ট ফন্ট মেট্রিক ব্যবহার করে ফন্টগুলিকে সামঞ্জস্য করে। এটি হল x-উচ্চতার অনুপাত, হরফ থেকে ফন্টের আকারে ছোট হাতের x এর উচ্চতা। আপনি ব্যবহৃত ফন্ট মেট্রিক নির্দিষ্ট করতে পারেন. পরবর্তী উদাহরণে, আমি সংখ্যা ছাড়াও ch-width কীওয়ার্ড ব্যবহার করে ফন্টগুলিকে স্বাভাবিক করেছি।

ch-প্রস্থ ফন্ট মেট্রিকের সাথে font-size-adjust ব্যবহার করে।

সমস্ত সম্ভাব্য মান দেখতে font-size-adjust এর জন্য MDN ডকুমেন্টেশন দেখুন।

আপনার ফলব্যাক ফন্ট ব্যবহার করে আপনার সাইটের দিকে তাকানো এবং font-size-adjust সাথে সামান্য পরিবর্তন করা পাঠকদের আরও ভাল অভিজ্ঞতা পেতে সাহায্য করতে পারে কিনা তা দেখতে মূল্যবান, বিশেষ করে এখন এটি সর্বত্র উপলব্ধ!