কীভাবে দক্ষতার সাথে ওয়েব ফন্ট সরবরাহ করতে Google ফন্ট CSS API ব্যবহার করবেন।
কয়েক বছর ধরে, ওয়েব ফন্ট প্রযুক্তির সাথে অনেক পরিবর্তন হয়েছে। যা একটি বিশেষ অনুশীলন ছিল যার জন্য পাঠ্যের একটি চিত্র বা একটি ফ্ল্যাশ প্লাগ-ইন প্রয়োজন (এবং এটি আপনার ওয়েবসাইটের সার্চ ইঞ্জিন অপ্টিমাইজেশানের সাথে আপস করেছিল) এখন ওয়েব জুড়ে একটি আদর্শ অনুশীলন৷ একসময়, পৃষ্ঠাটি লোড হওয়ার আগে আপনাকে একটি সম্পূর্ণ ফন্ট লোড করতে হয়েছিল - শৈলী এবং অক্ষর সহ যা আপনি এমনকি ব্যবহারও করেননি - তবে এটি অতীতের জিনিস হয়ে গেছে।
ওয়েব ফন্ট প্রযুক্তির পরিবর্তনের সাথে তাল মিলিয়ে চলার জন্য Google Fonts CSS API- ও বিবর্তিত হয়েছে। এটি তার মূল মান প্রস্তাব থেকে অনেক দূর এগিয়ে এসেছে—আপনার ব্রাউজারকে API ব্যবহার করা সমস্ত ওয়েবসাইট জুড়ে সাধারণত ব্যবহৃত ফন্টগুলি ক্যাশে করার অনুমতি দিয়ে ওয়েবকে দ্রুততর করতে৷ এটি আর সত্য নয় , তবে API এখনও অতিরিক্ত এবং গুরুত্বপূর্ণ অপ্টিমাইজেশন প্রদান করে যাতে ওয়েবসাইটগুলি দ্রুত লোড হয় এবং ফন্টগুলি ভালভাবে কাজ করে৷
Google Fonts CSS API ব্যবহার করে, আপনার ওয়েবসাইটটি তার CSS লোডিং সময়কে সর্বনিম্ন রাখার জন্য শুধুমাত্র ফন্ট ডেটার জন্য অনুরোধ করতে পারে, যাতে আপনার ওয়েবসাইটের দর্শকরা যত তাড়াতাড়ি সম্ভব আপনার সামগ্রী লোড করতে পারে। API সেই ওয়েব ব্রাউজারের জন্য সেরা ফন্টের সাথে প্রতিটি অনুরোধে সাড়া দেবে।
আপনার কোডে এইচটিএমএল এর একটি লাইন অন্তর্ভুক্ত করার মাধ্যমে এই সব ঘটে।
কিভাবে Google Fonts CSS API ব্যবহার করবেন
Google Fonts CSS API ডকুমেন্টেশন এটিকে সুন্দরভাবে তুলে ধরে:
আপনাকে কোনো প্রোগ্রামিং করতে হবে না; আপনাকে যা করতে হবে তা হল আপনার HTML নথিতে একটি বিশেষ স্টাইলশীট লিঙ্ক যোগ করুন, তারপর একটি CSS স্টাইলে ফন্টটি দেখুন।
আপনাকে ন্যূনতম যা করতে হবে তা হল আপনার HTML-এ একটি একক লাইন অন্তর্ভুক্ত করুন, যেমন:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
আপনি যখন API থেকে একটি ফন্টের জন্য অনুরোধ করেন, তখন আপনি কোন পরিবার বা পরিবারগুলিকে পছন্দ করবেন এবং ঐচ্ছিকভাবে, তাদের ওজন, শৈলী, উপসেট এবং অন্যান্য অনেক বিকল্পগুলি নির্দিষ্ট করুন৷ API তারপর আপনার অনুরোধ দুটি উপায়ে পরিচালনা করবে:
- যদি আপনার অনুরোধ সাধারণ পরামিতিগুলি ব্যবহার করে যেগুলির জন্য API-এর কাছে ইতিমধ্যেই ফাইল রয়েছে, তাহলে এটি অবিলম্বে আপনার ব্যবহারকারীকে এই ফাইলগুলিতে নির্দেশ করে CSS ফেরত দেবে।
- যদি আপনি পরামিতি সহ একটি ফন্টের অনুরোধ করেন যেটি API-এ বর্তমানে ক্যাশে করা নেই, তাহলে এটি দ্রুত করার জন্য HarfBuzz ব্যবহার করে আপনার ফন্টগুলিকে সাবসেট করবে এবং তাদের দিকে নির্দেশ করে CSS ফেরত দেবে।
ফন্ট ফাইল বড় হতে পারে, কিন্তু তারা হতে হবে না
ওয়েব ফন্ট বড় হতে পারে; এটা সত্যি. WOFF2-এ Noto Sans Japanese- এর মাত্র একটি ওজন প্রায় 3.4MB—এবং আপনার প্রত্যেক ব্যবহারকারীর কাছে এটি ডাউনলোড করা আপনার পৃষ্ঠা লোডের সময়কে টেনে আনবে। যখন প্রতিটি মিলিসেকেন্ড গণনা করা হয় এবং প্রতিটি বাইট মূল্যবান হয়, আপনি নিশ্চিত হতে চান যে আপনি শুধুমাত্র আপনার ব্যবহারকারীদের প্রয়োজনীয় ডেটা লোড করছেন।
Google Fonts CSS API খুব ছোট ফন্ট ফাইল তৈরি করতে পারে (যাকে সাবসেট বলা হয়), রিয়েল টাইমে তৈরি করা হয়, আপনার ব্যবহারকারীদের শুধুমাত্র আপনার ওয়েবসাইটের জন্য প্রয়োজনীয় পাঠ্য এবং শৈলীগুলি পরিবেশন করতে। একটি সম্পূর্ণ ফন্ট পরিবেশন করার পরিবর্তে, আপনি text প্যারামিটার ব্যবহার করে নির্দিষ্ট অক্ষরগুলির জন্য অনুরোধ করতে পারেন।
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API কোনো API প্যারামিটার ছাড়াই স্বয়ংক্রিয়ভাবে আপনার ব্যবহারকারীদের অতিরিক্ত ওয়েব ফন্ট অপ্টিমাইজেশন প্রদান করে। API আপনার ব্যবহারকারীদের সিএসএস ফাইলগুলিকে unicode-range ইতিমধ্যেই সক্ষম করে পরিবেশন করবে ( যদি তাদের ওয়েব ব্রাউজার দ্বারা সমর্থিত হয় ), তাই তারা আপনার ওয়েবসাইটের প্রয়োজনীয় নির্দিষ্ট অক্ষরের জন্য ফন্ট লোড করে।
ইউনিকোড-রেঞ্জ CSS বর্ণনাকারী হল একটি টুল যা এখন বড় ফন্ট ডাউনলোডের বিরুদ্ধে লড়াই করতে ব্যবহার করা যেতে পারে। এই CSS প্রপার্টি ইউনিকোড অক্ষরের একটি পরিসর সেট করে যা @font-face ডিক্লারেশনে থাকে। যদি এই অক্ষরের একটি পৃষ্ঠায় রেন্ডার করা হয়, সেই ফন্টটি ডাউনলোড করা হয়। এটি সব ধরণের ভাষার জন্য ভাল কাজ করে, তাই আপনি ল্যাটিন, গ্রীক বা সিরিলিক অক্ষর সহ একটি ফন্ট নিতে পারেন এবং ছোট উপসেট তৈরি করতে পারেন। পূর্ববর্তী চার্টে, আপনি দেখতে পাচ্ছেন যে যদি আপনাকে এই তিনটি অক্ষর সেট লোড করতে হয় তবে এটি 600 টির বেশি গ্লিফ হবে।
এটি ওয়েবের জন্য চাইনিজ, জাপানিজ এবং কোরিয়ান (CJK) ফন্টগুলিকেও সক্ষম করে৷ পূর্ববর্তী চার্টে, আপনি দেখতে পাচ্ছেন যে একটি CJK ফন্ট একটি ল্যাটিন অক্ষরের ফন্টের 15-20 গুণ অক্ষর কভার করে। এই ফন্টগুলি সাধারণত খুব বড় হয় এবং এই ভাষাগুলির অনেকগুলি অক্ষর অন্যদের মতো ঘন ঘন ব্যবহৃত হয় না।
CSS API এবং ইউনিকোড-রেঞ্জ ব্যবহার করে ফাইল স্থানান্তর প্রায় 90% কমাতে পারে। unicode-range বর্ণনাকারী ব্যবহার করে, আপনি প্রতিটি অংশ আলাদাভাবে সংজ্ঞায়িত করতে পারেন, এবং প্রতিটি স্লাইস শুধুমাত্র একবার ডাউনলোড করা হয় যখন আপনার বিষয়বস্তুতে এই অক্ষর পরিসরের একটি অক্ষর থাকে।
উদাহরণ: আপনি যদি Noto Sans JP- তে শুধুমাত্র "こんにちは" শব্দটি সেট করতে চান, তাহলে আপনি করতে পারেন:
- আপনার নিজস্ব WOFF2 ফাইল স্ব-হোস্ট করুন।
- WOFF2 পুনরুদ্ধার করতে CSS API ব্যবহার করুন।
- "こんにちは" এ সেট করা text= প্যারামিটার সহ CSS API ব্যবহার করুন৷
এই উদাহরণে, আপনি দেখতে পাচ্ছেন যে CSS API ব্যবহার করে আপনি ইতিমধ্যে WOFF2 ফন্টের স্ব-হোস্টিং থেকে 97.5% সাশ্রয় করছেন, বড় ফন্টগুলিকে ইউনিকোড-রেঞ্জে আলাদা করার জন্য API-এর অন্তর্নির্মিত সমর্থনকে ধন্যবাদ। এটিকে আরও এক ধাপ এগিয়ে নিয়ে এবং ঠিক যে পাঠ্যটি আপনি প্রদর্শন করতে চান তা নির্দিষ্ট করে, আপনি ফন্টের আকার CSS API ফন্টের মাত্র 95.3%-এ কমিয়ে আনতে পারেন-যা স্ব-হোস্ট করা ফন্টের চেয়ে 99.9% ছোট।
Google Fonts CSS API স্বয়ংক্রিয়ভাবে আপনার ব্যবহারকারীর ব্রাউজার দ্বারা সমর্থিত ক্ষুদ্রতম এবং সবচেয়ে সামঞ্জস্যপূর্ণ বিন্যাসে ফন্ট সরবরাহ করবে। যদি আপনার ব্যবহারকারী WOFF2 সমর্থন সহ একটি ব্রাউজারে থাকে, তাহলে API WOFF2-এ ফন্টগুলি সরবরাহ করবে, কিন্তু যদি তারা একটি পুরানো ব্রাউজার ব্যবহার করে, API সেই ব্রাউজার দ্বারা সমর্থিত একটি বিন্যাসে ফন্টগুলি সরবরাহ করবে। প্রতিটি ব্যবহারকারীর জন্য ফাইলের আকার কমাতে, API প্রয়োজন না হলে ফন্ট থেকে ডেটা সরিয়ে দেয়। উদাহরণস্বরূপ, যেসব ব্যবহারকারীর ব্রাউজারগুলির এটির প্রয়োজন নেই তাদের জন্য ইঙ্গিত ডেটা সরানো হবে৷
Google Fonts CSS API এর মাধ্যমে আপনার ওয়েব ফন্টকে ভবিষ্যৎ-প্রুফিং করা
Google ফন্ট টিম নতুন W3C মানগুলিতেও অবদান রাখে যা WOFF2 এর মতো ওয়েব ফন্ট প্রযুক্তি উদ্ভাবন অব্যাহত রাখে। একটি বর্তমান প্রকল্প হল ইনক্রিমেন্টাল ফন্ট ট্রান্সফার , যা ব্যবহারকারীদের ফন্ট ফাইলের খুব ছোট অংশ লোড করতে দেয় কারণ সেগুলি স্ক্রিনে ব্যবহার করা হয় এবং চাহিদা অনুযায়ী বাকি অংশে স্ট্রিম করা হয়, যা ইউনিকোড-রেঞ্জের পারফরম্যান্সকে ছাড়িয়ে যায়। আপনি যখন আমাদের ওয়েব ফন্ট API ব্যবহার করেন, তখন আপনার ব্যবহারকারীরা তাদের ব্রাউজারে উপলব্ধ হলে এই অন্তর্নিহিত ফন্ট স্থানান্তর প্রযুক্তির উন্নতিগুলি পায়৷
এটি একটি ফন্ট API এর সৌন্দর্য: আপনার ব্যবহারকারীরা আপনার ওয়েবসাইটে কোনো পরিবর্তন ছাড়াই প্রতিটি নতুন প্রযুক্তির উন্নতির সুবিধা পাবেন। নতুন ওয়েব ফন্ট ফরম্যাট? সমস্যা নেই. নতুন ব্রাউজার বা অপারেটিং সিস্টেম সমর্থন? এটা যত্ন নেওয়া হয়েছে. তাই আপনার ওয়েব ফন্টের রক্ষণাবেক্ষণে আটকা পড়ার পরিবর্তে, আপনি আপনার ব্যবহারকারী এবং আপনার সামগ্রীতে ফোকাস করতে মুক্ত।
পরিবর্তনশীল ফন্ট বিল্ট-ইন সমর্থন করে
পরিবর্তনশীল ফন্ট হল ফন্ট ফাইল যা একাধিক অক্ষের মধ্যে ডিজাইনের বৈচিত্র্যের একটি পরিসীমা সংরক্ষণ করতে পারে এবং Google ফন্ট CSS API-এর নতুন সংস্করণে তাদের জন্য সমর্থন অন্তর্ভুক্ত রয়েছে। বৈচিত্র্যের একটি অতিরিক্ত অক্ষ যোগ করা একটি ফন্টের সাথে নতুন নমনীয়তা সক্ষম করে — তবে এটি ফন্ট ফাইলের আকার প্রায় দ্বিগুণ করতে পারে।
আপনি যখন আপনার CSS API অনুরোধে আরও সুনির্দিষ্ট হন, তখন ব্যবহারকারীদের জন্য ডাউনলোডের আকার কমানোর জন্য Google Fonts CSS API আপনার ওয়েবসাইটের প্রয়োজনীয় পরিবর্তনশীল ফন্টের শুধুমাত্র অংশটি পরিবেশন করতে পারে। এটি দীর্ঘ পৃষ্ঠা লোডিং সময় ব্যয় না করে ওয়েবের জন্য পরিবর্তনশীল ফন্ট ব্যবহার করতে সক্ষম করে। আপনি একটি অক্ষে একটি একক মান নির্দিষ্ট করে বা একটি পরিসর নির্দিষ্ট করে এটি করতে পারেন; আপনি এক অনুরোধে একাধিক অক্ষ এবং একাধিক ফন্ট পরিবারও নির্দিষ্ট করতে পারেন। API আপনার প্রয়োজন মেটাতে নমনীয়।
বাস্তবায়ন করা সহজ, আপনার জন্য অপ্টিমাইজ করা হয়েছে
Google Fonts CSS API আপনাকে ফন্ট সরবরাহ করতে সাহায্য করে যেগুলি হল:
- ওয়েব ব্রাউজারগুলির সাথে আরও সামঞ্জস্যপূর্ণ।
- যতটা সম্ভব ছোট।
- দ্রুত বিতরণ করা হয়।
- আপনার ব্যবহার করা আরও সহজ।
Google ফন্ট সম্পর্কে আরও তথ্যের জন্য, fonts.google.com দেখুন। CSS API সম্পর্কে আরও জানতে, API ডকুমেন্টেশন পর্যালোচনা করুন।
স্বীকৃতি
নায়ক ইমেজ leesehee দ্বারা.