ফন্ট-ডিসপ্লে দিয়ে ফন্টের কার্যক্ষমতা নিয়ন্ত্রণ করা

Rob Dodson

একটি ওয়েব ফন্ট লোড হচ্ছে বলে তার আচরণ নির্ধারণ করা একটি গুরুত্বপূর্ণ পারফরম্যান্স টিউনিং কৌশল হতে পারে। @font-face এর জন্য নতুন ফন্ট-ডিসপ্লে বর্ণনাকারী ডেভেলপারদের সিদ্ধান্ত নিতে দেয় যে তাদের ওয়েব ফন্টগুলি কীভাবে রেন্ডার করবে (বা ফলব্যাক), তাদের লোড হতে কতক্ষণ সময় লাগবে তার উপর নির্ভর করে।

আজ ফন্ট রেন্ডারিং মধ্যে পার্থক্য

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

একটি ধীর ফন্ট ডাউনলোডের কিছু ঝুঁকি কমাতে, বেশিরভাগ ব্রাউজার একটি টাইমআউট বাস্তবায়ন করে যার পরে একটি ফলব্যাক ফন্ট ব্যবহার করা হবে। এটি একটি দরকারী কৌশল কিন্তু দুর্ভাগ্যবশত ব্রাউজারগুলি প্রকৃত বাস্তবায়নে ভিন্ন।

ব্রাউজার	টাইমআউট	ফলব্যাক	অদলবদল
Chrome 35+	3 সেকেন্ড	হ্যাঁ	হ্যাঁ
অপেরা	3 সেকেন্ড	হ্যাঁ	হ্যাঁ
ফায়ারফক্স	3 সেকেন্ড	হ্যাঁ	হ্যাঁ
ইন্টারনেট এক্সপ্লোরার	0 সেকেন্ড	হ্যাঁ	হ্যাঁ
সাফারি	কোন সময়সীমা নেই	N/A	N/A

• ক্রোম এবং ফায়ারফক্সের তিন সেকেন্ডের টাইমআউট রয়েছে যার পরে পাঠ্যটি ফলব্যাক ফন্টের সাথে দেখানো হয়। যদি ফন্টটি ডাউনলোড করতে পরিচালনা করে, তাহলে অবশেষে একটি অদলবদল ঘটে এবং পাঠ্যটি উদ্দেশ্যযুক্ত ফন্টের সাথে পুনরায় রেন্ডার করা হয়।
• ইন্টারনেট এক্সপ্লোরারের একটি শূন্য সেকেন্ড টাইমআউট রয়েছে যার ফলে তাৎক্ষণিক পাঠ্য রেন্ডারিং হয়। অনুরোধ করা ফন্টটি এখনও উপলব্ধ না হলে, একটি ফলব্যাক ব্যবহার করা হয় এবং অনুরোধ করা ফন্টটি উপলব্ধ হয়ে গেলে পাঠ্যটি পরে পুনরায় রেন্ডার করা হয়।
• সাফারির কোন টাইমআউট আচরণ নেই (বা অন্তত একটি বেসলাইন নেটওয়ার্ক টাইমআউটের বাইরে কিছুই নয়)।

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

এই পরিস্থিতির প্রতিকারে সাহায্য করার জন্য CSS ওয়ার্কিং গ্রুপ একটি নতুন @font-face descriptor, font-display এবং একটি সংশ্লিষ্ট সম্পত্তির প্রস্তাব করেছে যাতে একটি ডাউনলোডযোগ্য ফন্ট সম্পূর্ণরূপে লোড হওয়ার আগে কীভাবে রেন্ডার হয় তা নিয়ন্ত্রণ করে।

ফন্ট ডাউনলোড টাইমলাইন

বিদ্যমান ফন্ট টাইমআউট আচরণের অনুরূপ যা কিছু ব্রাউজার আজকে প্রয়োগ করে, font-display একটি ফন্ট ডাউনলোডের জীবনকালকে তিনটি প্রধান সময়ের মধ্যে ভাগ করে।

1. প্রথম পিরিয়ড হল ফন্ট ব্লক পিরিয়ড । এই সময়ের মধ্যে, যদি ফন্ট ফেস লোড করা না হয়, যে কোনো উপাদান এটি ব্যবহার করার চেষ্টা করে তার পরিবর্তে একটি অদৃশ্য ফলব্যাক ফন্ট ফেস দিয়ে রেন্ডার করতে হবে। ব্লকের সময় ফন্ট ফেস সফলভাবে লোড হলে, ফন্ট ফেস সাধারণত ব্যবহার করা হয়।
2. ফন্ট অদলবদল সময়কাল ফন্ট ব্লক সময়ের পরপরই ঘটে। এই সময়ের মধ্যে, যদি ফন্ট ফেস লোড করা না হয়, যে কোনো উপাদান এটি ব্যবহার করার চেষ্টা করে তার পরিবর্তে একটি ফলব্যাক ফন্ট ফেস দিয়ে রেন্ডার করতে হবে। যদি অদলবদল সময়কালে ফন্ট ফেস সফলভাবে লোড হয়, তাহলে ফন্ট ফেস সাধারণত ব্যবহার করা হয়।
3. ফন্ট ব্যর্থতার সময় ফন্ট অদলবদল সময়কালের পরপরই ঘটে। এই সময়কাল শুরু হওয়ার সময় যদি ফন্ট ফেস এখনও লোড না হয়, তাহলে এটি একটি ব্যর্থ লোড হিসাবে চিহ্নিত করা হয়, যার ফলে স্বাভাবিক ফন্ট ফলব্যাক হয়। অন্যথায়, ফন্ট ফেস সাধারণত ব্যবহার করা হয়।

এই পিরিয়ডগুলি বোঝার অর্থ হল আপনি font-display ব্যবহার করে সিদ্ধান্ত নিতে পারেন যে আপনার ফন্টটি কখন ডাউনলোড করা হয়েছে তার উপর নির্ভর করে কীভাবে রেন্ডার করা উচিত।

কোন ফন্ট-ডিসপ্লে আপনার জন্য সঠিক?

font-display বর্ণনাকারীর সাথে কাজ করতে, এটিকে আপনার @font-face এ-রুলস যোগ করুন:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display বর্তমানে auto | block | swap | fallback | optional মানগুলির নিম্নলিখিত পরিসরকে সমর্থন করে auto | block | swap | fallback | optional

স্বয়ংক্রিয়

স্বয়ংক্রিয়ভাবে ব্যবহারকারী-এজেন্ট যে ফন্ট প্রদর্শন কৌশল ব্যবহার করে তা ব্যবহার করে। বেশিরভাগ ব্রাউজারে বর্তমানে ব্লকের মতো একটি ডিফল্ট কৌশল রয়েছে।

ব্লক

ব্লক ফন্ট ফেসকে একটি সংক্ষিপ্ত ব্লক পিরিয়ড দেয় (বেশিরভাগ ক্ষেত্রে 3s সুপারিশ করা হয়) এবং একটি অসীম অদলবদল সময়কাল। অন্য কথায়, ফন্টটি লোড না হলে ব্রাউজার প্রথমে "অদৃশ্য" পাঠ্য আঁকে, কিন্তু লোড হওয়ার সাথে সাথে ফন্টের মুখ অদলবদল করে। এটি করার জন্য ব্রাউজার নির্বাচিত ফন্টের মতো মেট্রিক্স সহ একটি বেনামী ফন্ট ফেস তৈরি করে তবে "কালি" নেই এমন সমস্ত গ্লিফ সহ। এই মানটি শুধুমাত্র তখনই ব্যবহার করা উচিত যখন পৃষ্ঠাটি ব্যবহারযোগ্য হওয়ার জন্য একটি নির্দিষ্ট টাইপফেসে পাঠ্য রেন্ডার করা প্রয়োজন।

অদলবদল

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

ফলব্যাক

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

ঐচ্ছিক

ঐচ্ছিক ফন্ট ফেসকে একটি অত্যন্ত ছোট ব্লক পিরিয়ড দেয় (অধিকাংশ ক্ষেত্রে 100ms বা কম বাঞ্ছনীয়) এবং একটি শূন্য সেকেন্ড সোয়াপ পিরিয়ড। ফলব্যাকের মতোই, এটি একটি ভাল পছন্দ যখন ডাউনলোড ফন্টটি "অনেক ভালো" তবে অভিজ্ঞতার জন্য সমালোচনামূলক নয়৷ ঐচ্ছিক মানটি ফন্ট ডাউনলোড শুরু করবেন কিনা তা সিদ্ধান্ত নিতে ব্রাউজারকে ছেড়ে দেয়, যা এটি না করা বেছে নিতে পারে বা এটি ব্যবহারকারীর জন্য সবচেয়ে ভাল হবে বলে মনে করে তার উপর নির্ভর করে এটি কম অগ্রাধিকার হিসাবে করতে পারে। এটি এমন পরিস্থিতিতে উপকারী হতে পারে যেখানে ব্যবহারকারী একটি দুর্বল সংযোগে থাকে এবং একটি ফন্ট নামিয়ে দেওয়া সম্পদের সর্বোত্তম ব্যবহার নাও হতে পারে।

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

font-display বর্তমানে ডেক্সটপ ক্রোম 49-এ এক্সপেরিমেন্টাল ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য পতাকার পিছনে রয়েছে এবং Android এর জন্য Opera এবং Opera-এ শিপিং করছে৷

ডেমো

font-display শট দিতে নমুনাটি দেখুন। পারফরম্যান্স মাইন্ডেড ডেভেলপারদের জন্য এটি আপনার টুলবেল্টে আরও একটি দরকারী টুল হতে পারে!