উন্নত ফন্ট ফলব্যাক

Katie Hempenius

সারাংশ

এই নিবন্ধটি ফন্ট ফলব্যাক এবং size-adjust , ascent-override , descent-override এবং line-gap-override এপিআইগুলির মধ্যে একটি গভীর ডুব। এই APIs ফলব্যাক ফন্ট ফেস তৈরি করতে স্থানীয় ফন্ট ব্যবহার করা সম্ভব করে যা একটি ওয়েব ফন্টের মাত্রার সাথে ঘনিষ্ঠভাবে বা হুবহু মেলে। এটি ফন্ট অদলবদল দ্বারা সৃষ্ট লেআউট স্থানান্তর হ্রাস বা বাদ দেয়।

আপনি যদি এই নিবন্ধটি পড়া এড়িয়ে যেতে চান তবে এইগুলি হল কিছু সরঞ্জাম যা আপনি অবিলম্বে এই APIগুলি ব্যবহার শুরু করতে ব্যবহার করতে পারেন:

ফ্রেমওয়ার্ক টুলস:

• @next/font : পরবর্তী 13 থেকে শুরু করে, next/font স্বয়ংক্রিয়ভাবে ফন্ট মেট্রিক ওভাররাইড ব্যবহার করে এবং মানানসই ফন্ট ফলব্যাক প্রদান করতে size-adjust ।
• @nuxtjs/fontaine : Nuxt 3 থেকে শুরু করে, আপনি nuxt/fontaine ব্যবহার করতে পারেন স্বয়ংক্রিয়ভাবে তৈরি করতে এবং আপনার Nuxt অ্যাপ দ্বারা ব্যবহৃত স্টাইলশীটে মিলিত ফন্ট ফলব্যাক সন্নিবেশ করান।

নন-ফ্রেমওয়ার্ক টুলস:

• ফন্টেইন : ফন্টেইন একটি লাইব্রেরি যা স্বয়ংক্রিয়ভাবে ফন্ট ফলব্যাক তৈরি করে এবং সন্নিবেশ করে যা ফন্ট মেট্রিক ওভাররাইড ব্যবহার করে।
• এই রেপোতে Google ফন্ট দ্বারা হোস্ট করা সমস্ত ফন্টের জন্য ফন্ট মেট্রিক ওভাররাইড রয়েছে। এই মানগুলি কপি এবং আপনার স্টাইলশীটে আটকানো যেতে পারে।

পটভূমি

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

font-family: "Roboto" , sans-serif;

ফলব্যাক ফন্টগুলি পাঠ্যকে আরও দ্রুত রেন্ডার করতে ব্যবহার করা যেতে পারে (অর্থাৎ, font-display: swap ব্যবহার করে)। ফলস্বরূপ, পৃষ্ঠার বিষয়বস্তু আগে পঠনযোগ্য এবং উপযোগী হয়-তবে, ঐতিহাসিকভাবে, এটি লেআউট অস্থিরতার মূল্যে এসেছে: লেআউট পরিবর্তন সাধারণত ঘটে যখন একটি ফলব্যাক ফন্ট ওয়েব ফন্টের জন্য অদলবদল করা হয়। যাইহোক, নীচে আলোচনা করা নতুন APIগুলি তাদের ওয়েব ফন্টের প্রতিরূপ হিসাবে একই পরিমাণ স্থান নেয় এমন ফলব্যাক ফন্ট ফেস তৈরি করা সম্ভব করে এই সমস্যাটিকে কমাতে বা নির্মূল করতে পারে।

উন্নত ফন্ট ফলব্যাক

"উন্নত" ফন্ট ফলব্যাক তৈরি করার জন্য দুটি সম্ভাব্য পন্থা রয়েছে। সহজ পদ্ধতি শুধুমাত্র ফন্ট মেট্রিক ওভাররাইড API ব্যবহার করে। আরও জটিল (কিন্তু আরও শক্তিশালী) পদ্ধতি ফন্ট মেট্রিক ওভাররাইড API এবং size-adjust উভয়ই ব্যবহার করে। এই নিবন্ধটি এই উভয় পদ্ধতির ব্যাখ্যা করে।

কিভাবে ফন্ট মেট্রিক ওভাররাইড কাজ করে

ভূমিকা

ফন্ট মেট্রিক ওভাররাইড একটি ফন্টের আরোহণ, অবতরণ এবং লাইন-ব্যবধান ওভাররাইড করার একটি উপায় প্রদান করে:

• আরোহণ সবচেয়ে দূরবর্তী দূরত্ব পরিমাপ করে যা একটি ফন্টের গ্লিফগুলি বেসলাইনের উপরে প্রসারিত হয়।
• ডিসেন্ট সবচেয়ে দূরের দূরত্ব পরিমাপ করে যা একটি ফন্টের গ্লিফগুলি বেসলাইনের নীচে প্রসারিত করে।
• লাইন গ্যাপ , যাকে "লিডিং"ও বলা হয়, পাঠ্যের ধারাবাহিক লাইনের মধ্যে দূরত্ব পরিমাপ করে।

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

ফন্ট মেট্রিক ওভাররাইডগুলি এইরকম একটি স্টাইলশীটে ব্যবহার করা হয়:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

এই নিবন্ধের শুরুতে তালিকাভুক্ত টুলগুলি সঠিক ফন্ট মেট্রিক ওভাররাইড মান তৈরি করতে পারে। যাইহোক, আপনি নিজেও এই মানগুলি গণনা করতে পারেন।

ফন্ট মেট্রিক ওভাররাইড গণনা করা হচ্ছে

নিম্নলিখিত সমীকরণগুলি একটি প্রদত্ত ওয়েব ফন্টের জন্য ফন্ট মেট্রিক ওভাররাইড করে। ফন্ট মেট্রিক ওভাররাইডের মানগুলি দশমিকের পরিবর্তে শতাংশ হিসাবে লেখা উচিত (উদাহরণস্বরূপ, 105% )।

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

উদাহরণস্বরূপ, পপিন ফন্টের জন্য এই ফন্ট মেট্রিক ওভাররাইডগুলি হল:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

ascent , descent , line-gap এবং unitsPerEm এর মানগুলি সবই আসে ওয়েব ফন্টের মেটাডেটা থেকে। এই প্রবন্ধের পরবর্তী বিভাগ ব্যাখ্যা করে কিভাবে এই মানগুলি পেতে হয়।

ফন্ট টেবিল পড়া

একটি ফন্টের মেটাডেটা (বিশেষত, এর ফন্ট টেবিল ) সমস্ত তথ্য রয়েছে যা আপনাকে এর ফন্ট মেট্রিক ওভাররাইড গণনা করতে হবে।

এখানে কিছু টুল রয়েছে যা আপনি একটি ফন্টের মেটাডেটা পড়তে ব্যবহার করতে পারেন:

• fontkit Node.js এর জন্য নির্মিত একটি ফন্ট ইঞ্জিন। এই কোড স্নিপেট দেখায় কিভাবে ফন্ট মেট্রিক ওভাররাইড গণনা করতে ফন্টকিট ব্যবহার করতে হয়।
• ক্যাপসাইজ একটি ফন্ট সাইজিং এবং লেআউট লাইব্রেরি। ক্যাপসাইজ বিভিন্ন ফন্ট মেট্রিক্স সম্পর্কে তথ্য পাওয়ার জন্য একটি API প্রদান করে।
• fontdrop.info একটি ওয়েবসাইট যা আপনাকে ব্রাউজার থেকে ফন্ট টেবিল এবং অন্যান্য ফন্ট-সম্পর্কিত তথ্য দেখতে দেয়।
• ফন্ট ফোর্জ একটি জনপ্রিয় ডেস্কটপ ফন্ট সম্পাদক। ascent , descent এবং line-gap দেখতে: Font Info ডায়ালগ খুলুন, OS/2 মেনু নির্বাচন করুন, তারপর Metrics ট্যাব নির্বাচন করুন। UPM দেখতে: Font Info ডায়ালগ খুলুন, তারপর General মেনু নির্বাচন করুন।

ফন্ট টেবিল বোঝা

আপনি লক্ষ্য করতে পারেন যে "অ্যাসেন্ট" এর মত ধারণাগুলিকে একাধিক মেট্রিক্স দ্বারা উল্লেখ করা হয়েছে—উদাহরণস্বরূপ, hheaAscent , typoAscent , এবং winAscent মেট্রিক্স রয়েছে৷ এটি বিভিন্ন অপারেটিং সিস্টেমের ফন্ট রেন্ডারিংয়ের বিভিন্ন পদ্ধতি গ্রহণের ফলাফল: OSX ডিভাইসে প্রোগ্রামগুলি সাধারণত hhea* ফন্ট মেট্রিক্স ব্যবহার করে — যখন উইন্ডোজ ডিভাইসের প্রোগ্রামগুলি সাধারণত typo* (এটিকে sTypo* নামেও উল্লেখ করা হয়) বা win* ফন্ট মেট্রিক্স ব্যবহার করে।

ফন্ট, ব্রাউজার এবং অপারেটিং সিস্টেমের উপর নির্ভর করে, hhea , typo বা win মেট্রিক্স ব্যবহার করে একটি ফন্ট রেন্ডার করা হবে৷

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

ক্রস-ডিভাইস সামঞ্জস্য

বেশিরভাগ ফন্টের জন্য (উদাহরণস্বরূপ, Google ফন্ট দ্বারা হোস্ট করা ফন্টের ~90%) ফন্ট মেট্রিক্স ওভাররাইডগুলি ব্যবহারকারীর অপারেটিং সিস্টেম না জেনে নিরাপদে ব্যবহার করা যেতে পারে: অন্য কথায়, এই ফন্টগুলির জন্য ascent-override , descent-override মান descent-override , এবং linegap-override হুবহু একই থাকে তা নির্বিশেষে hhea , typo বা win মেট্রিক্স প্রযোজ্য। এই রেপো তথ্য প্রদান করে যে এটি কোন ফন্টে প্রযোজ্য হবে না।

আপনি যদি এমন একটি ফন্ট ব্যবহার করেন যার জন্য OSX এবং Windows ডিভাইসের জন্য ফন্ট মেট্রিক ওভাররাইডের পৃথক সেট ব্যবহার করতে হয়, তাহলে ফন্ট মেট্রিক ওভাররাইড এবং size-adjust ব্যবহার করার পরামর্শ দেওয়া হয় যদি আপনার ব্যবহারকারীর অপারেটিং সিস্টেমের উপর ভিত্তি করে আপনার স্টাইলশীট পরিবর্তন করার ক্ষমতা থাকে।

ফন্ট মেট্রিক ওভাররাইড ব্যবহার করে

যেহেতু ফন্ট মেট্রিক ওভাররাইডগুলি ওয়েব ফন্টের (এবং ফলব্যাক ফন্ট নয়) এর মেটাডেটা থেকে আসা পরিমাপ ব্যবহার করে গণনা করা হয়, ফলব্যাক ফন্ট হিসাবে যে ফন্ট ব্যবহার করা হোক না কেন তারা একই থাকে। যেমন:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

কিভাবে আকার-সামঞ্জস্য কাজ করে

ভূমিকা

size-adjust সিএসএস বর্ণনাকারী আনুপাতিকভাবে ফন্ট গ্লিফের প্রস্থ এবং উচ্চতা মাপে। উদাহরণস্বরূপ, size-adjust: 200% স্কেল ফন্ট গ্লিফকে তাদের আসল আকারের দ্বিগুণ করে; size-adjust: 50% স্কেল ফন্ট গ্লিফকে তাদের আসল আকারের অর্ধেক করে।

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

এইভাবে স্টাইলশীটে size-adjust ব্যবহার করা হয়:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

size-adjust কীভাবে গণনা করা হয় (যা পরবর্তী বিভাগে ব্যাখ্যা করা হয়েছে), কোন ফলব্যাক ফন্ট ব্যবহার করা হয়েছে তার উপর নির্ভর করে size-adjust মান (এবং সংশ্লিষ্ট ফন্ট মেট্রিক ওভাররাইড) পরিবর্তিত হয়:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

আকার-সামঞ্জস্য এবং ফন্ট মেট্রিক ওভাররাইড গণনা করা হচ্ছে

size-adjust এবং ফন্ট মেট্রিক ওভাররাইড গণনা করার জন্য এই সমীকরণগুলি:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

এই ইনপুটগুলির বেশিরভাগই (অর্থাৎ, আরোহণ, ডিসেন্ট এবং লাইন-গ্যাপ) ওয়েব ফন্টের মেটাডেটা থেকে সরাসরি পড়া যায়। যাইহোক, avgCharacterWidth আনুমানিক হতে হবে।

আনুমানিক গড় অক্ষর প্রস্থ

সাধারণভাবে, গড় অক্ষর প্রস্থ শুধুমাত্র আনুমানিক হতে পারে—কিন্তু এমন কিছু পরিস্থিতি রয়েছে যেখানে এটি সঠিকভাবে গণনা করা যেতে পারে: উদাহরণস্বরূপ, যখন একটি মনোস্পেসড ফন্ট ব্যবহার করা হয় বা যখন একটি পাঠ্য স্ট্রিংয়ের বিষয়বস্তু আগে থেকেই জানা যায়।

avgCharacterWidth গণনা করার জন্য একটি নির্বোধ পদ্ধতির একটি উদাহরণ হল সমস্ত [az\s] অক্ষরের গড় প্রস্থ নেওয়া।

যাইহোক, সমস্ত অক্ষরকে সমানভাবে ওজন করা হলে প্রায়শই ব্যবহৃত অক্ষরগুলির প্রস্থের ওজন কম হবে (উদাহরণস্বরূপ, e ) এবং কদাচিৎ ব্যবহৃত অক্ষরগুলির প্রস্থের ওজন বেশি হবে (উদাহরণস্বরূপ, z )।

আরও জটিল পদ্ধতি যা সঠিকতা উন্নত করে তা হল অক্ষরের ফ্রিকোয়েন্সি বিবেচনায় নেওয়া এবং পরিবর্তে [az\s] অক্ষরের ফ্রিকোয়েন্সি-ওয়েটেড গড় প্রস্থ গণনা করা। এই নিবন্ধটি ইংরেজি পাঠ্যের অক্ষরের ফ্রিকোয়েন্সি এবং গড় শব্দ দৈর্ঘ্যের জন্য একটি ভাল রেফারেন্স।

একটি পদ্ধতি নির্বাচন

এই নিবন্ধে আলোচনা করা দুটি পদ্ধতির প্রতিটির সুবিধা এবং অসুবিধা রয়েছে:

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

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

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

এই নিবন্ধে বর্ণিত কৌশলগুলি ফন্ট মেট্রিক ওভাররাইড ব্যবহার করার উপর নির্ভর করে এবং ব্যাপকভাবে উপলব্ধ স্থানীয় ফন্টগুলিকে রূপান্তর করার জন্য size-adjust - ওয়েব ফন্টের কাছাকাছি একটি স্থানীয় ফন্ট খুঁজে বের করার চেষ্টা করার পরিবর্তে। স্থানীয় ফন্টগুলি বেছে নেওয়ার সময় এটি মনে রাখা গুরুত্বপূর্ণ যে খুব কম ফন্টের ব্যাপক স্থানীয় প্রাপ্যতা রয়েছে এবং সমস্ত ডিভাইসে কোনও একক ফন্ট থাকবে না।

Arial হল sans-serif ফন্টের জন্য প্রস্তাবিত ফলব্যাক ফন্ট এবং Times New Roman হল serif ফন্টের জন্য প্রস্তাবিত ফলব্যাক ফন্ট। যাইহোক, এই ফন্টগুলির কোনটিই অ্যান্ড্রয়েডে উপলব্ধ নেই ( Roboto অ্যান্ড্রয়েডের একমাত্র সিস্টেম ফন্ট)৷

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

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

প্রতিক্রিয়া জন্য অনুরোধ

ফন্ট মেট্রিক ওভাররাইড এবং size-adjust ব্যবহার করে আপনার অভিজ্ঞতার বিষয়ে আপনার কোনো প্রতিক্রিয়া থাকলে অনুগ্রহ করে যোগাযোগ করুন।