CSS font-size-adjust
প্রপার্টি আজ ক্রোমে আসে এবং নতুনভাবে উপলব্ধ বেসলাইনের অংশ হয়ে যায়। ফলব্যাক ফন্টগুলি লোড হওয়ার সময় এই বৈশিষ্ট্যটি আপনার লেআউটের স্থানান্তর রোধ করতে এবং ছোট ফন্ট আকারে ফলব্যাক ফন্টগুলির স্পষ্টতা নিশ্চিত করতে সহায়তা করতে পারে। font-size-adjust
প্রপার্টি ইন্টারপ 2024- এর অংশ, তাই ওয়েব প্ল্যাটফর্মের আন্তঃকার্যক্ষমতা উন্নত করার প্রচেষ্টার জন্য এটি আরেকটি জয়।
সমস্যাটি
যখন আপনি একই আকারে সেট করা দুটি ফন্ট তুলনা করেন, গ্লিফের আকার এবং আকারের উপর নির্ভর করে, প্রদর্শিত পাঠ্যটি খুব আলাদা পরিমাণ স্থান নিতে পারে। উদাহরণ হিসেবে, নিচের ডেমোতে Verdana এবং Arial-এ টেক্সট দেখানো হয়েছে, উভয়ই 16 পিক্সেলে সেট করা হয়েছে।
আকারের পার্থক্য এই সত্যের জন্য দায়ী যে ফন্টের মধ্যে বড় হাতের অক্ষরের সাথে তুলনা করার সময় আকৃতির মান , ছোট হাতের অক্ষরগুলির উচ্চতা ফন্টের মধ্যে পরিবর্তিত হয়।
এটি দুটি সমস্যা সৃষ্টি করতে পারে যখন একটি ভিন্ন আকৃতির মান সহ একটি ফন্ট ফলব্যাক হিসাবে ব্যবহার করা হয়। প্রথমত ফন্ট দ্বারা নেওয়া জায়গার পরিমাণ পরিবর্তন হবে। দ্বিতীয়ত, আপনার পছন্দের ফলব্যাক ফন্টটি প্রথমে নির্দিষ্ট করা ফন্টের চেয়ে কম পাঠযোগ্য হতে পারে, বিশেষ করে ছোট ফন্টের আকারে। এর কারণ হল ছোট হাতের অক্ষর থেকে বড় হাতের অক্ষরের আপেক্ষিক উচ্চতা সুস্পষ্টতার একটি মূল কারণ।
font-size-adjust
কিভাবে সাহায্য করে
font-size-adjust
প্রপার্টি আপনাকে প্রথম ফন্টের সাথে ভালোভাবে মেলে আপনার ফলব্যাক ফন্ট সামঞ্জস্য করতে দেয়। নিম্নলিখিত উদাহরণটি পূর্বে দেখানো দুটি ফন্ট দেখায়, এবার দ্বিতীয় ফন্টটি প্রথমটির সাথে মেলানোর জন্য সামঞ্জস্য করা হয়েছে।
এই উদাহরণটি একটি একক মান ব্যবহার করে, একটি সংখ্যা, যা ex-height
ডিফল্ট ফন্ট মেট্রিক ব্যবহার করে ফন্টগুলিকে সামঞ্জস্য করে। এটি হল x-উচ্চতার অনুপাত, হরফ থেকে ফন্টের আকারে ছোট হাতের x এর উচ্চতা। আপনি ব্যবহৃত ফন্ট মেট্রিক নির্দিষ্ট করতে পারেন. পরবর্তী উদাহরণে, আমি সংখ্যা ছাড়াও ch-width
কীওয়ার্ড ব্যবহার করে ফন্টগুলিকে স্বাভাবিক করেছি।
সমস্ত সম্ভাব্য মান দেখতে font-size-adjust
এর জন্য MDN ডকুমেন্টেশন দেখুন।
আপনার ফলব্যাক ফন্ট ব্যবহার করে আপনার সাইটের দিকে তাকানো এবং font-size-adjust
সাথে সামান্য পরিবর্তন করা পাঠকদের আরও ভাল অভিজ্ঞতা পেতে সাহায্য করতে পারে কিনা তা দেখতে মূল্যবান, বিশেষ করে এখন এটি সর্বত্র উপলব্ধ!