এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

CSS API আপডেট

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

নতুন কি

এটি সব একটি নতুন বেস URL দিয়ে শুরু হয়:

https://fonts.googleapis.com/css2

পরিবর্তনশীল ফন্ট 'ডিজাইন স্পেস' বর্ণনা করতে প্রতিটি পরিবারের মধ্যে শৈলী নির্দিষ্ট করার জন্য সিনট্যাক্স পরিবর্তিত হয়েছে।

কুইকস্টার্ট গাইড

এই এইচটিএমএলটি কপি করে একটি ফাইলে পেস্ট করুন:

<html>
  <head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

ফাইলটি খোলার জন্য একটি ব্রাউজার ব্যবহার করে, পৃষ্ঠাটিকে ক্রিমসন প্রো ফন্টে "মেকিং দ্য ওয়েব বিউটিফুল" লেখাটি রেন্ডার করা উচিত।

ওয়েব সুন্দর করা!

একাধিক পরিবার

একাধিক পরিবারের অনুরোধ করতে, প্রতিটি পরিবারের জন্য family= param উল্লেখ করুন।

উদাহরণস্বরূপ, ক্রিমসন প্রো এবং লিটারটা ফন্টগুলির জন্য অনুরোধ করতে:

https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata

এই এইচটিএমএলটি কপি করে একটি ফাইলে পেস্ট করুন:

<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
    <style>
      body {
        font-size: 48px;
      }
      div:nth-child(1) {
        font-family: 'Crimson Pro', serif;
      }
      div:nth-child(2) {
        font-family: 'Literata’, serif;
      }
    </style>
  </head>
  <body>
    <div>Making the Web Beautiful!</div>
    <div>Making the Web Beautiful!</div>
  </body>
</html>

ফাইলটি খোলার জন্য একটি ব্রাউজার ব্যবহার করে, পৃষ্ঠাটির পাঠ্য রেন্ডার করা উচিত, "মেকিং দ্য ওয়েব বিউটিফুল", প্রথমে ক্রিমসন প্রোতে তারপর লিটারটাতে।

ওয়েব সুন্দর করা!

অক্ষ রেঞ্জ

পরিবর্তনশীল ফন্টগুলি প্রায়শই অতিরিক্ত লেটেন্সি ছাড়াই ক্রমাগত শৈলীর রেঞ্জ অফার করে। এটি প্রতিক্রিয়াশীল ডিজাইনের জন্য প্রাসঙ্গিক। এই গতিশীল টাইপোগ্রাফি একটি পৃষ্ঠায় 100 থেকে 900 এর মধ্যে সমস্ত ওজন অফার করে এবং কিছু শর্তের উপর ভিত্তি করে প্রতিক্রিয়াশীলভাবে ওজনের পরিবর্তন করে শৈলীর ক্রমাগত পরিসর ব্যবহার করে।

একটি পরিবর্তনশীল ফন্ট অক্ষের একটি পরিসরের অনুরোধ করতে, .. এর সাথে 2টি মান যোগ করুন

হরফ(গুলি)	অনুরোধ
ক্রিমসন প্রো [ `wght 200-900` ]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900`
ক্রিমসন প্রো ইটালিক [ `wght 200-900` ]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900`
ক্রিমসন প্রো বোল্ড ইটালিক এবং [ `wght 200-900` ]	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700`

আপনার ব্রাউজার পরিবর্তনশীল ফন্ট ( caniuse ) সমর্থন করে বলে মনে হচ্ছে না। একটি ব্রাউজারে যা ফন্টের বৈচিত্র্য সমর্থন করে, নিম্নলিখিত পাঠ্যটি ক্রিমসন প্রোকে 400 থেকে 500 পর্যন্ত ওজনের একটি মসৃণ সেট হিসাবে রেন্ডার করবে। CSS অ্যানিমেশনগুলি পাঠকে মসৃণভাবে ইন্টারঅ্যাকশনের শৈলীতে পরিবর্তন করতে পারে।

যদি আপনার ব্রাউজার সম্পূর্ণরূপে পরিবর্তনশীল ফন্ট ( caniuse ) সমর্থন করে, তাহলে নিম্নলিখিত পাঠ্যটি ক্রিমসন প্রোকে 400 থেকে 500 পর্যন্ত ওজনের একটি মসৃণ সেট হিসাবে রেন্ডার করবে। CSS অ্যানিমেশনগুলি টেক্সটটিকে মসৃণভাবে ইন্টারঅ্যাকশনের শৈলীতে পরিবর্তন করতে পারে।

ওয়েব সুন্দর করা!

স্বতন্ত্র শৈলী, যেমন ওজন

শৈলী নির্দিষ্টকরণ ছাড়া, API অনুরোধ করা পরিবারের ডিফল্ট শৈলী প্রদান করে। অন্যান্য স্বতন্ত্র শৈলীর অনুরোধ করতে, যেমন নির্দিষ্ট ওজন, ফন্ট পরিবারের নামের পরে একটি কোলন (:) যুক্ত করুন, তারপরে বর্ণানুক্রমিক ক্রমে অক্ষ সম্পত্তি কীওয়ার্ডগুলির একটি তালিকা, একটি চিহ্ন (@), এবং এর এক বা একাধিক তালিকা অক্ষ বৈশিষ্ট্যের জন্য মান।

এই উদাহরণগুলি কর্মে এটি দেখায়।

হরফ(গুলি)	অনুরোধ
ক্রিমসন প্রো (ডিফল্ট)	`https://fonts.googleapis.com/css2?family=Crimson+Pro`
ক্রিমসন প্রো বোল্ড	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700`
ক্রিমসন প্রো নিয়মিত এবং সাহসী	`https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700`
ক্রিমসন প্রো বোল্ড এবং বোল্ড ইটালিক	`https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700`

Google ফন্ট প্রতিটি ফন্ট পরিবারের জন্য উপলব্ধ সমস্ত শৈলী তালিকাভুক্ত করে।

ডিফল্ট শৈলী

যখন একটি অনুরোধ একটি অক্ষের জন্য একটি অবস্থান বা ব্যাপ্তি নির্দিষ্ট করে না, তখন ডিফল্ট অবস্থান ব্যবহার করা হবে৷ ইটালিক অক্ষের ডিফল্ট অবস্থান হল 0 (স্বাভাবিক) এবং ওজন অক্ষের জন্য ডিফল্ট হল 400 (নিয়মিত)।

ডিফল্ট অবস্থান নেই এমন অক্ষ সহ পরিবারগুলির জন্য, সেই অক্ষগুলির অবস্থান নির্দিষ্ট করে না এমন অনুরোধগুলি ব্যর্থ হবে৷ উদাহরণস্বরূপ, 500 থেকে 900 পর্যন্ত ওজনের অক্ষ সহ একটি পরিবারকে অনুরোধ করার সময়, ওজনের অবস্থান অবশ্যই উল্লেখ করতে হবে।

অ-মানক ওজন

স্ট্যাটিক ফন্টের সাথে, ওজনের শৈলীগুলি সাধারণত 100 এর গুণিতক হিসাবে নির্দিষ্ট করা হয় (যেমন 300, 400, 700)। পরিবর্তনশীল হরফগুলি মানক ওজন এবং মধ্যবর্তী ওজন উভয়ই অফার করে। একটি মধ্যবর্তী ওজন রেন্ডার করতে:

https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450

আপনার ব্রাউজার পরিবর্তনশীল ফন্ট ( caniuse ) সমর্থন করে বলে মনে হচ্ছে না। একটি ব্রাউজারে যা ফন্টের বৈচিত্রগুলি সমর্থন করে, নিম্নলিখিত পাঠ্যটি 400, 450 এবং 500 এর দৃশ্যত স্বতন্ত্র ওজনে ক্রিমসন প্রো রেন্ডার করা উচিত।

যদি আপনার ব্রাউজার সম্পূর্ণরূপে পরিবর্তনশীল ফন্ট ( caniuse ) সমর্থন করে, তাহলে নিম্নলিখিত পাঠ্যটি 400, 450, এবং 500 এর দৃশ্যত স্বতন্ত্র ওজনে ক্রিমসন প্রো রেন্ডার করা উচিত।

ওয়েব সুন্দর করা!

লেটেন্সি এবং ফাইলের আকারের জন্য অপ্টিমাইজ করা

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

ফন্ট-ডিসপ্লে ব্যবহার করুন

ফন্ট-ডিসপ্লে প্রপার্টি আপনাকে ফন্টটি এখনও লোড হওয়ার সময় বা অন্যথায় অনুপলব্ধ অবস্থায় কী ঘটবে তা নিয়ন্ত্রণ করতে দেয়। ডিফল্ট auto ব্যতীত অন্য একটি মান নির্দিষ্ট করা সাধারণত উপযুক্ত।

display প্যারামিটারে পছন্দসই মানটি পাস করুন:

https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap

আপনার ফন্ট অনুরোধ অপ্টিমাইজ করা

প্রায়শই, আপনি যখন আপনার সাইট বা অ্যাপ্লিকেশনে একটি ওয়েব ফন্ট ব্যবহার করতে চান, আপনি আগে থেকেই জানেন যে আপনার কোন অক্ষরগুলির প্রয়োজন হবে৷ এটি প্রায়ই ঘটে যখন আপনি একটি লোগো বা শিরোনামে একটি ওয়েব ফন্ট ব্যবহার করছেন।

এই ক্ষেত্রে, আপনার ফন্ট অনুরোধ URL-এ একটি text= মান উল্লেখ করার কথা বিবেচনা করা উচিত। এটি Google ফন্টকে আপনার অনুরোধের জন্য অপ্টিমাইজ করা একটি ফন্ট ফাইল ফেরত দেওয়ার অনুমতি দেয়৷ কিছু ক্ষেত্রে, এটি ফন্ট ফাইলের আকার 90% পর্যন্ত কমাতে পারে।

এই বৈশিষ্ট্যটি ব্যবহার করতে, আপনার API অনুরোধে text= যোগ করুন। উদাহরণস্বরূপ, যদি আপনি শুধুমাত্র আপনার ব্লগের শিরোনামের জন্য Inconsolata ব্যবহার করেন, তাহলে আপনি শিরোনামটিকেই text= এর মান হিসাবে রাখতে পারেন। অনুরোধটি দেখতে কেমন হবে তা এখানে:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello

সমস্ত ক্যোয়ারী স্ট্রিংগুলির মতো, আপনার মানটিকে URL-এনকোড করা উচিত:

https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World

এই বৈশিষ্ট্যটি আন্তর্জাতিক ফন্টগুলির জন্যও কাজ করে, যা আপনাকে UTF-8 অক্ষর নির্দিষ্ট করার অনুমতি দেয়। উদাহরণস্বরূপ, হোলা! হিসাবে প্রতিনিধিত্ব করা হয়:

https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!

অনুগ্রহ করে মনে রাখবেন যে 'text=' প্যারামিটার শুধুমাত্র একবার নির্দিষ্ট করা যেতে পারে। এটি অনুরোধে সমস্ত পরিবারের জন্য প্রযোজ্য। আপনার যদি একাধিক পরিবার জুড়ে বিভিন্ন পাঠ্য অপ্টিমাইজেশনের প্রয়োজন হয় তবে অনুগ্রহ করে পৃথক API অনুরোধগুলি ব্যবহার করুন৷

API URL গঠন করা

কঠোরতা

একটি সাধারণ নোট হিসাবে, আপডেট করা CSS API মূল CSS API এর চেয়ে কোন অনুরোধগুলি গ্রহণ করা হয় সে সম্পর্কে আরও কঠোর।

সাধারণ নির্দেশিকা:

অক্ষগুলিকে বর্ণানুক্রমিকভাবে তালিকাভুক্ত করুন ( en-US লোকেল)
অক্ষ মান গ্রুপ (অর্থাৎ tuples) সাংখ্যিকভাবে সাজানো প্রয়োজন
Tuples ওভারল্যাপ বা স্পর্শ করতে পারে না (যেমন wght 400..500 এবং 500..600)

API URL স্পেসিফিকেশন

/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]

spec : <family_name>[:<axis_tag_list>@<axis_tuple_list>]

family_name : ফন্ট পরিবারের নাম

axis_tag_list : <axis>[,<axis>...] // Sorted alphabetically (en-US locale)

axis : একটি অক্ষ ট্যাগ, যেমন ital , wdth , wght

axis_tuple_list : <axis_tuple>[;<axis_tuple>...]

axis_tuple : <value>[,<value>...] // Same length as axis_tag_list

value : <range> | <float>

range : <float>..<float>

float : সংশ্লিষ্ট অক্ষের সীমার মধ্যে একটি মান

text : অনুরোধ করা টাইপফেসে প্রদর্শিত পাঠ্য

display : auto | block | swap | fallback | optional

লিগ্যাসি ব্রাউজার সমর্থন

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

প্রগতিশীল বর্ধন অনুশীলন করে, আপনি সেই পুরানো ব্রাউজারগুলিতে অপ্রত্যাশিত আচরণ এড়াতে পারেন। পরিবর্তনশীল ফন্ট বৈশিষ্ট্য গেট করতে আপনার CSS-এ @supports কোয়েরি ব্যবহার করুন।

এই উদাহরণে, আমরা মার্কাজি পাঠ্যের ওজন 450 ব্যবহার করতে চাই, কিন্তু পরিবর্তনশীল ফন্ট বৈশিষ্ট্যগুলি সমর্থিত না হলে নিয়মিত (ওজন 400) বা মাঝারি (ওজন 500) এ ফিরে যেতে হবে:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />

<style>
  * {
    font-family: 'Markazi Text';
    font-weight: 400;
  }

  @supports (font-variation-settings: "wght" 450) {
    * {
      font-family: 'Markazi Text';
      font-weight: 450;
    }
  }
</style>

CSS অনুরোধ Markazi+Text:wght@450 ক্লায়েন্টদের কাছে ওজন 450 পাঠায় যারা ভেরিয়েবল ফন্ট সমর্থন করে এবং যারা 400 এবং 500 করে না তাদের কাছে। সাধারণভাবে, আপনার অনুরোধের সীমার চারপাশে ফলব্যাকগুলি লিগ্যাসি ব্রাউজারগুলিতে উপলব্ধ হবে৷

অক্ষ	ফলব্যাকস
`ital`	0, 1
`wght`	100, 200, 300, 400, 500, 600, 700, 800, 900

এই উদাহরণগুলি দেখায় যে কয়েকটি ভিন্ন অনুরোধের জন্য লিগ্যাসি ব্রাউজারে কী স্টাইল পাওয়া যাবে।

অনুরোধ	লিগ্যাসি ব্রাউজারে শৈলী উপলব্ধ
`ital@0`	`ital@0`
`wght@500`	`wght@500`
`wght@432`	`wght@400;500`
`wght@440..560`	`wght@400;500;600`

উপলব্ধ পরিবর্তনশীল ফন্ট

v2 API-তে উপলব্ধ ভেরিয়েবল ফন্টগুলির একটি টেবিল এখানে পাওয়া যাবে।

আরও পড়া

Google Fonts এ Google Fonts API দ্বারা প্রদত্ত ফন্ট পরিবারের একটি সম্পূর্ণ তালিকা দেখুন।
প্রযুক্তিগত বিবেচনার পৃষ্ঠায় Google ফন্ট API কীভাবে কাজ করে সে সম্পর্কে আরও জানুন।