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

স্থানীয় ফন্টের সাথে উন্নত টাইপোগ্রাফি ব্যবহার করুন

স্থানীয় ফন্ট অ্যাক্সেস API আপনাকে ব্যবহারকারীর স্থানীয়ভাবে ইনস্টল করা ফন্টগুলি অ্যাক্সেস করতে এবং তাদের সম্পর্কে নিম্ন-স্তরের বিশদ পেতে দেয় তা জানুন

Thomas Steiner

ওয়েব নিরাপদ ফন্ট

আপনি যদি দীর্ঘদিন ধরে ওয়েব ডেভেলপমেন্ট করে থাকেন, তাহলে আপনি তথাকথিত ওয়েব সেফ ফন্টগুলি মনে রাখতে পারেন। এই ফন্টগুলি সর্বাধিক ব্যবহৃত অপারেটিং সিস্টেমের (যেমন উইন্ডোজ, ম্যাকওএস, সর্বাধিক সাধারণ লিনাক্স ডিস্ট্রিবিউশন, অ্যান্ড্রয়েড এবং আইওএস) প্রায় সমস্ত ক্ষেত্রে উপলব্ধ বলে পরিচিত। 2000-এর দশকের গোড়ার দিকে, মাইক্রোসফ্ট এমনকি ওয়েবের জন্য TrueType কোর ফন্ট নামে একটি উদ্যোগের নেতৃত্ব দিয়েছিল যেটি এই ফন্টগুলি বিনামূল্যে ডাউনলোডের জন্য প্রদান করে এই উদ্দেশ্য যে "যখনই আপনি একটি ওয়েব সাইট পরিদর্শন করেন যা সেগুলিকে নির্দিষ্ট করে, আপনি সাইট ডিজাইনারের ইচ্ছা মতই পৃষ্ঠাগুলি দেখতে পাবেন৷ " হ্যাঁ, এতে কমিক সানস এমএস- এ সেট করা সাইটগুলি অন্তর্ভুক্ত রয়েছে। এখানে একটি ক্লাসিক ওয়েব সেফ ফন্ট স্ট্যাক রয়েছে (যেকোনো sans-serif ফন্টের চূড়ান্ত ফলব্যাক সহ) এইরকম দেখতে পারে:

body {
  font-family: Helvetica, Arial, sans-serif;
}

ওয়েব ফন্ট

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

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: url('flamboyant.woff2');
}

এর পরে, আপনি স্বাভাবিক হিসাবে font-family নির্দিষ্ট করে কাস্টম ওয়েব ফন্ট ব্যবহার করতে পারেন:

body {
  font-family: 'FlamboyantSansSerif';
}

আঙ্গুলের ছাপ ভেক্টর হিসাবে স্থানীয় ফন্ট

বেশিরভাগ ওয়েব ফন্ট আসে, ভাল, ওয়েব থেকে। যদিও একটি মজার তথ্য হল যে @font-face ডিক্লেয়ারেশনে src প্রপার্টি, url() ফাংশন ছাড়াও একটি local() ফাংশন গ্রহণ করে। এটি স্থানীয়ভাবে কাস্টম ফন্ট লোড করার অনুমতি দেয় (আশ্চর্য!)। ব্যবহারকারীর যদি তাদের অপারেটিং সিস্টেমে FlamboyantSansSerif ইনস্টল করা থাকে, তাহলে স্থানীয় অনুলিপিটি ডাউনলোড করার পরিবর্তে ব্যবহার করা হবে:

@font-face {
  font-family: 'FlamboyantSansSerif';
  src: local('FlamboyantSansSerif'), url('flamboyant.woff2');
}

এই পদ্ধতিটি একটি চমৎকার ফলব্যাক প্রক্রিয়া প্রদান করে যা সম্ভাব্য ব্যান্ডউইথ সংরক্ষণ করে। ইন্টারনেটে, দুর্ভাগ্যবশত, আমাদের কাছে সুন্দর জিনিস থাকতে পারে না। local() ফাংশনের সমস্যা হল এটি ব্রাউজার ফিঙ্গারপ্রিন্টিংয়ের জন্য অপব্যবহার করা যেতে পারে। দেখা যাচ্ছে, ব্যবহারকারী যে ফন্টগুলি ইনস্টল করেছেন তার তালিকাটি বেশ শনাক্ত করা যেতে পারে। অনেক কোম্পানির নিজস্ব কর্পোরেট ফন্ট রয়েছে যা কর্মচারীদের ল্যাপটপে ইনস্টল করা আছে। উদাহরণস্বরূপ, Google এর একটি কর্পোরেট ফন্ট রয়েছে যাকে Google Sans বলা হয়।

macOS ফন্ট বুক অ্যাপটি Google Sans ফন্টের পূর্বরূপ দেখাচ্ছে। — Google Sans ফন্টটি একজন Google কর্মীর ল্যাপটপে ইনস্টল করা আছে।

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

কোম্পানির ফন্টগুলি আলাদা করে, এমনকি ইনস্টল করা ফন্টের তালিকাও শনাক্ত করতে পারে। এই আক্রমণ ভেক্টরের পরিস্থিতি এতটাই খারাপ হয়ে গেছে যে সম্প্রতি WebKit টিম "শুধুমাত্র [উপলব্ধ ফন্টের তালিকায়] ওয়েব ফন্ট এবং ফন্টগুলি অন্তর্ভুক্ত করার সিদ্ধান্ত নিয়েছে যা অপারেটিং সিস্টেমের সাথে আসে, কিন্তু স্থানীয়ভাবে ব্যবহারকারী দ্বারা ইনস্টল করা ফন্ট নয়"। (এবং আমি এখানে, স্থানীয় ফন্টগুলিতে অ্যাক্সেস দেওয়ার বিষয়ে একটি নিবন্ধ সহ।)

স্থানীয় ফন্ট অ্যাক্সেস API

এই নিবন্ধের শুরুটি আপনাকে একটি নেতিবাচক মেজাজে ফেলে থাকতে পারে। আমরা কি সত্যিই সুন্দর জিনিস পেতে পারি না? বিরক্ত না. আমরা মনে করি আমরা পারি, এবং হয়তো সবকিছু আশাহীন নয় । কিন্তু প্রথমে, আমাকে একটি প্রশ্নের উত্তর দিন যা আপনি নিজেকে জিজ্ঞাসা করছেন।

ওয়েব ফন্ট থাকলে কেন আমাদের লোকাল ফন্ট অ্যাক্সেস এপিআই দরকার?

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

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

স্থানীয় ফন্ট অ্যাক্সেস API এই চ্যালেঞ্জগুলি সমাধান করার একটি প্রচেষ্টা। এটি দুটি অংশ নিয়ে গঠিত:

একটি ফন্ট গণনা API , যা ব্যবহারকারীদের উপলব্ধ সিস্টেম ফন্টগুলির সম্পূর্ণ সেটে অ্যাক্সেস দেওয়ার অনুমতি দেয়।
প্রতিটি গণনার ফলাফল থেকে, নিম্ন-স্তরের (বাইট-ভিত্তিক) SFNT কন্টেইনার অ্যাক্সেসের অনুরোধ করার ক্ষমতা যাতে সম্পূর্ণ ফন্ট ডেটা অন্তর্ভুক্ত থাকে।

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

উৎস

স্থানীয় ফন্ট অ্যাক্সেস API কীভাবে ব্যবহার করবেন

বৈশিষ্ট্য সনাক্তকরণ

স্থানীয় ফন্ট অ্যাক্সেস API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('queryLocalFonts' in window) {
  // The Local Font Access API is supported
}

স্থানীয় ফন্ট গণনা করা হচ্ছে

স্থানীয়ভাবে ইনস্টল করা ফন্টগুলির একটি তালিকা পেতে, আপনাকে window.queryLocalFonts() কল করতে হবে। প্রথমবার, এটি একটি অনুমতি প্রম্পট ট্রিগার করবে, যা ব্যবহারকারী অনুমোদন বা অস্বীকার করতে পারে। ব্যবহারকারী যদি তাদের স্থানীয় ফন্টগুলি জিজ্ঞাসা করার জন্য অনুমোদন করে, ব্রাউজার ফন্ট ডেটা সহ একটি অ্যারে ফিরিয়ে দেবে যা আপনি লুপ করতে পারেন। প্রতিটি ফন্টকে বৈশিষ্ট্য family (উদাহরণস্বরূপ, "Comic Sans MS" ), fullName (উদাহরণস্বরূপ, "Comic Sans MS" ), postscriptName (উদাহরণস্বরূপ, "কমিকসানসএমএস"), এবং style (উদাহরণস্বরূপ, "ComicSansMS" ) সহ একটি FontData অবজেক্ট হিসাবে উপস্থাপন করা হয় , "Regular" )।

// Query for all available fonts and log metadata.
try {
  const availableFonts = await window.queryLocalFonts();
  for (const fontData of availableFonts) {
    console.log(fontData.postscriptName);
    console.log(fontData.fullName);
    console.log(fontData.family);
    console.log(fontData.style);
  }
} catch (err) {
  console.error(err.name, err.message);
}

আপনি যদি শুধুমাত্র ফন্টের একটি উপসেটে আগ্রহী হন, তাহলে আপনি পোস্টস্ক্রিপ্ট নামগুলির উপর ভিত্তি করে একটি postscriptNames প্যারামিটার যোগ করে ফিল্টার করতে পারেন।

const availableFonts = await window.queryLocalFonts({
  postscriptNames: ['Verdana', 'Verdana-Bold', 'Verdana-Italic'],
});

SFNT ডেটা অ্যাক্সেস করা হচ্ছে

FontData অবজেক্টের blob() পদ্ধতির মাধ্যমে সম্পূর্ণ SFNT অ্যাক্সেস পাওয়া যায়। SFNT হল একটি ফন্ট ফাইল ফরম্যাট যাতে অন্যান্য ফন্ট থাকতে পারে, যেমন পোস্টস্ক্রিপ্ট, ট্রু টাইপ, ওপেন টাইপ, ওয়েব ওপেন ফন্ট ফরম্যাট (ডব্লিউওএফএফ) ফন্ট এবং অন্যান্য।

try {
  const availableFonts = await window.queryLocalFonts({
    postscriptNames: ['ComicSansMS'],
  });
  for (const fontData of availableFonts) {
    // `blob()` returns a Blob containing valid and complete
    // SFNT-wrapped font data.
    const sfnt = await fontData.blob();
    // Slice out only the bytes we need: the first 4 bytes are the SFNT
    // version info.
    // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
    const sfntVersion = await sfnt.slice(0, 4).text();

    let outlineFormat = 'UNKNOWN';
    switch (sfntVersion) {
      case '\x00\x01\x00\x00':
      case 'true':
      case 'typ1':
        outlineFormat = 'truetype';
        break;
      case 'OTTO':
        outlineFormat = 'cff';
        break;
    }
    console.log('Outline format:', outlineFormat);
  }
} catch (err) {
  console.error(err.name, err.message);
}

ডেমো

আপনি নীচের ডেমোতে স্থানীয় ফন্ট অ্যাক্সেস API-কে কার্যরত দেখতে পারেন। এছাড়াও উত্স কোড চেক আউট নিশ্চিত করুন. ডেমো <font-select> নামে একটি কাস্টম উপাদান প্রদর্শন করে যা একটি স্থানীয় ফন্ট পিকার প্রয়োগ করে।

গোপনীয়তা বিবেচনা

"local-fonts" অনুমতি একটি অত্যন্ত আঙ্গুলের ছাপযোগ্য পৃষ্ঠ প্রদান করে বলে মনে হচ্ছে। যাইহোক, ব্রাউজারগুলি তাদের পছন্দ মতো কিছু ফেরত দিতে বিনামূল্যে। উদাহরণস্বরূপ, বেনামী-কেন্দ্রিক ব্রাউজারগুলি ব্রাউজারে নির্মিত ডিফল্ট ফন্টগুলির একটি সেট প্রদান করতে বেছে নিতে পারে। একইভাবে, ব্রাউজারগুলিকে টেবিলের ডেটা সরবরাহ করার প্রয়োজন নেই যেভাবে এটি ডিস্কে প্রদর্শিত হয়।

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

নিরাপত্তা এবং অনুমতি

Chrome টিম ব্যবহারকারীর নিয়ন্ত্রণ, স্বচ্ছতা এবং ergonomics সহ শক্তিশালী ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলিতে অ্যাক্সেস নিয়ন্ত্রণে সংজ্ঞায়িত মূল নীতিগুলি ব্যবহার করে স্থানীয় ফন্ট অ্যাক্সেস API ডিজাইন এবং প্রয়োগ করেছে৷

ব্যবহারকারী নিয়ন্ত্রণ

ব্যবহারকারীর ফন্টগুলিতে অ্যাক্সেস সম্পূর্ণরূপে তাদের নিয়ন্ত্রণে থাকে এবং অনুমতি রেজিস্ট্রিতে তালিকাভুক্ত "local-fonts" অনুমতি না দেওয়া পর্যন্ত অনুমতি দেওয়া হবে না।

স্বচ্ছতা

ব্যবহারকারীর স্থানীয় ফন্টগুলিতে একটি সাইটকে অ্যাক্সেস দেওয়া হয়েছে কিনা তা সাইট তথ্য শীটে দৃশ্যমান হবে৷

অনুমতি অধ্যবসায়

পৃষ্ঠা পুনরায় লোড করার মধ্যে "local-fonts" অনুমতি অব্যাহত থাকবে। এটি সাইট তথ্য শীট মাধ্যমে প্রত্যাহার করা যেতে পারে.

প্রতিক্রিয়া

Chrome টিম স্থানীয় ফন্ট অ্যাক্সেস API এর সাথে আপনার অভিজ্ঞতার কথা শুনতে চায়৷

API ডিজাইন সম্পর্কে আমাদের বলুন

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

আপনি কি Chrome এর বাস্তবায়নের সাথে একটি বাগ খুঁজে পেয়েছেন? অথবা বাস্তবায়ন বৈশিষ্ট থেকে ভিন্ন? new.crbug.com এ একটি বাগ ফাইল করুন। আপনি যতটা পারেন বিস্তারিত, পুনরুত্পাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না এবং উপাদান বাক্সে Blink>Storage>FontAccess লিখুন। দ্রুত এবং সহজ রিপ্রো শেয়ার করার জন্য গ্লিচ দুর্দান্ত কাজ করে।

API এর জন্য সমর্থন দেখান

আপনি কি স্থানীয় ফন্ট অ্যাক্সেস API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chrome টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ৷

#LocalFontAccess হ্যাশট্যাগ ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি কোথায় এবং কীভাবে এটি ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক

স্বীকৃতি

স্থানীয় ফন্ট অ্যাক্সেস API স্পেক সম্পাদনা করেছেন এমিল এ. একলুন্ড , অ্যালেক্স রাসেল , জোশুয়া বেল এবং অলিভিয়ের ইপ্টং । এই নিবন্ধটি জো মেডলি , ডমিনিক রটচেস এবং অলিভিয়ের ইপ্টং দ্বারা পর্যালোচনা করা হয়েছে। আনস্প্ল্যাশে ব্রেট জর্ডানের হিরো ছবি।