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

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

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

Thomas Steiner

প্রকাশিত: ২৪ আগস্ট, ২০২০

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

আপনি যদি দীর্ঘদিন ধরে ওয়েব ডেভেলপমেন্ট করে থাকেন, তাহলে আপনার হয়তো তথাকথিত ওয়েব সেফ ফন্টের কথা মনে থাকবে। এই ফন্টগুলি প্রায় সবচেয়ে বেশি ব্যবহৃত অপারেটিং সিস্টেমে (যেমন উইন্ডোজ, ম্যাকওএস, সবচেয়ে সাধারণ লিনাক্স ডিস্ট্রিবিউশন, অ্যান্ড্রয়েড এবং আইওএস) পাওয়া যায়। ২০০০ সালের গোড়ার দিকে, মাইক্রোসফট এমনকি ওয়েবের জন্য ট্রুটাইপ কোর ফন্ট নামে একটি উদ্যোগের নেতৃত্ব দিয়েছিল যা এই ফন্টগুলিকে বিনামূল্যে ডাউনলোডের জন্য সরবরাহ করেছিল এই উদ্দেশ্য নিয়ে যে "যখনই আপনি এমন কোনও ওয়েবসাইটে যান যেখানে সেগুলি নির্দিষ্ট করা থাকে, তখন আপনি সাইট ডিজাইনারের ইচ্ছা অনুযায়ী পৃষ্ঠাগুলি দেখতে পাবেন" । হ্যাঁ, এর মধ্যে কমিক স্যানস এমএস- এ সেট করা সাইটগুলি অন্তর্ভুক্ত ছিল। এখানে একটি ক্লাসিক ওয়েব সেফ ফন্ট স্ট্যাক (যে কোনও 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 Sans ।

ম্যাকওএস ফন্ট বুক অ্যাপটি গুগল স্যানস ফন্টের একটি প্রিভিউ দেখাচ্ছে। — গুগলের একজন কর্মচারীর ল্যাপটপে গুগল স্যানস ফন্ট ইনস্টল করা।

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

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

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

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

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

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

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

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

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

ব্রাউজার সাপোর্ট

Browser Support

Source

লোকাল ফন্ট অ্যাক্সেস এপিআই কীভাবে ব্যবহার করবেন

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

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

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

স্থানীয় ফন্টের তালিকা তৈরি করা

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

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

SFNT ডেটা অ্যাক্সেস করা

FontData অবজেক্টের blob() পদ্ধতির মাধ্যমে সম্পূর্ণ SFNT অ্যাক্সেস পাওয়া যায়। SFNT হল একটি ফন্ট ফাইল ফর্ম্যাট যাতে অন্যান্য ফন্ট থাকতে পারে, যেমন PostScript, TrueType, OpenType, Web Open Font Format (WOFF) ফন্ট এবং অন্যান্য।

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-এর জন্য ফেরত পাঠানো ডেটা ফেরত দেওয়ার আগে সাজানো প্রয়োজন।

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

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

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

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

স্বচ্ছতা

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

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

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

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

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

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

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

বাস্তবায়নে কোনও সমস্যার কথা জানান

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

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

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

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

সহায়ক লিঙ্ক

স্বীকৃতি

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