অদৃশ্য পাঠ্যের ফ্ল্যাশ এড়িয়ে চলুন

কেটি হেমপেনিয়াস
Katie Hempenius
X

এই কোড ল্যাব আপনাকে দেখায় কিভাবে ফন্ট ফেস অবজারভার ব্যবহার করে অবিলম্বে পাঠ্য প্রদর্শন করতে হয়।

ফন্ট ফেস অবজারভার যোগ করুন

ফন্ট ফেস অবজারভার হল একটি স্ক্রিপ্ট যা ফন্ট লোড হওয়ার সময় সনাক্ত করে। fontfaceobserver.js ফাইলটি ইতিমধ্যেই প্রজেক্ট ডিরেক্টরিতে সংরক্ষিত হয়েছে, তাই আপনাকে এটি আলাদাভাবে যোগ করার দরকার নেই। যাইহোক, আপনাকে এটির জন্য একটি স্ক্রিপ্ট ট্যাগ যোগ করতে হবে।

  • প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
  • index.html এ fontfaceobserver.js এর জন্য একটি স্ক্রিপ্ট ট্যাগ যোগ করুন: 
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

ফন্ট ফেস অবজারভার ব্যবহার করুন

পর্যবেক্ষক তৈরি করুন

পৃষ্ঠায় ব্যবহৃত প্রতিটি ফন্ট পরিবারের জন্য একটি পর্যবেক্ষক তৈরি করুন।

  • fontfaceobserver.js স্ক্রিপ্টের পরে নিম্নলিখিত স্ক্রিপ্ট যোগ করুন। এটি "Pacifico" এবং "Roboto" ফন্ট পরিবারের জন্য পর্যবেক্ষক তৈরি করে: 
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

আপনি যদি কখনও অনিশ্চিত হন যে কোন ফন্ট ফেস পর্যবেক্ষকগুলি আপনাকে তৈরি করতে হবে, শুধু আপনার CSS-এ font-family ঘোষণাগুলি সন্ধান করুন৷ এই ঘোষণাগুলির font-family নামটি FontFaceObserver() এ পাস করুন। ফলব্যাক ফন্টের জন্য একটি ফন্ট পর্যবেক্ষক তৈরি করার প্রয়োজন নেই।

উদাহরণস্বরূপ, যদি আপনার CSS ছিল:

font-family: "Times New Roman", Times, serif;

আপনি FontFaceObserver('Times New Roman') যোগ করবেন। টাইমস এবং সেরিফ হল ফলব্যাক ফন্ট, তাই আপনাকে তাদের জন্য FontFaceObservers ঘোষণা করতে হবে না।

ফন্ট লোড সনাক্ত করুন

একটি ফন্ট লোড সনাক্ত করার জন্য কোড এই মত দেখায়:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() একটি প্রতিশ্রুতি যা ফন্ট লোড হলে সমাধান করে।

ডেমো সাইট দুটি ভিন্ন ফন্ট ব্যবহার করে, তাই আপনাকে উভয় ফন্ট লোড না হওয়া পর্যন্ত অপেক্ষা করতে Promise.all() ব্যবহার করতে হবে।

  • আপনার স্ক্রিপ্টে এই প্রতিশ্রুতি যোগ করুন, ঠিক ফন্টফেসঅবজারভারের নীচে যা আপনি ঘোষণা করেছেন: 
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️চেক-ইন করুন

আপনার স্ক্রিপ্ট এখন এই মত হওয়া উচিত:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

fonts-loaded ক্লাস প্রয়োগ করুন

  • এই লাইন দিয়ে স্ক্রিপ্টে /* Do things */ মন্তব্যটি প্রতিস্থাপন করুন: 
document.documentElement.classList.add("fonts-loaded");

উভয় ফন্ট লোড হয়ে গেলে এটি নথির মূল উপাদানে ( <html> ট্যাগ) fonts-loaded ক্লাস যোগ করে।

✔️চেক-ইন করুন

আপনার সম্পূর্ণ স্ক্রিপ্ট এই মত হওয়া উচিত:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

CSS আপডেট করুন

আপনার পৃষ্ঠাটি প্রাথমিকভাবে একটি সিস্টেম ফন্ট ব্যবহার করার জন্য স্টাইল করা উচিত এবং একবার fonts-loaded ক্লাস প্রয়োগ করা হলে কাস্টম ফন্টগুলি ব্যবহার করা উচিত।

  • CSS আপডেট করুন: 
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

যাচাই করুন

  • সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন ফুলস্ক্রিন .

যদি পৃষ্ঠাটি এরকম দেখায়, তাহলে আপনি সফলভাবে ফন্ট ফেস অবজারভার প্রয়োগ করেছেন এবং "অদৃশ্য পাঠ্যের ফ্ল্যাশ" থেকে মুক্তি পেয়েছেন।

একটি অভিশাপ ফন্টে একটি শিরোনাম৷

,

কেটি হেমপেনিয়াস
Katie Hempenius
X

এই কোড ল্যাব আপনাকে দেখায় কিভাবে ফন্ট ফেস অবজারভার ব্যবহার করে অবিলম্বে পাঠ্য প্রদর্শন করতে হয়।

ফন্ট ফেস অবজারভার যোগ করুন

ফন্ট ফেস অবজারভার হল একটি স্ক্রিপ্ট যা ফন্ট লোড হওয়ার সময় সনাক্ত করে। fontfaceobserver.js ফাইলটি ইতিমধ্যেই প্রজেক্ট ডিরেক্টরিতে সংরক্ষিত হয়েছে, তাই আপনাকে এটি আলাদাভাবে যোগ করার দরকার নেই। যাইহোক, আপনাকে এটির জন্য একটি স্ক্রিপ্ট ট্যাগ যোগ করতে হবে।

  • প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
  • index.html এ fontfaceobserver.js এর জন্য একটি স্ক্রিপ্ট ট্যাগ যোগ করুন: 
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

ফন্ট ফেস অবজারভার ব্যবহার করুন

পর্যবেক্ষক তৈরি করুন

পৃষ্ঠায় ব্যবহৃত প্রতিটি ফন্ট পরিবারের জন্য একটি পর্যবেক্ষক তৈরি করুন।

  • fontfaceobserver.js স্ক্রিপ্টের পরে নিম্নলিখিত স্ক্রিপ্ট যোগ করুন। এটি "Pacifico" এবং "Roboto" ফন্ট পরিবারের জন্য পর্যবেক্ষক তৈরি করে: 
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

আপনি যদি কখনও অনিশ্চিত হন যে কোন ফন্ট ফেস পর্যবেক্ষকগুলি আপনাকে তৈরি করতে হবে, শুধু আপনার CSS-এ font-family ঘোষণাগুলি সন্ধান করুন৷ এই ঘোষণাগুলির font-family নামটি FontFaceObserver() এ পাস করুন। ফলব্যাক ফন্টের জন্য একটি ফন্ট পর্যবেক্ষক তৈরি করার প্রয়োজন নেই।

উদাহরণস্বরূপ, যদি আপনার CSS ছিল:

font-family: "Times New Roman", Times, serif;

আপনি FontFaceObserver('Times New Roman') যোগ করবেন। টাইমস এবং সেরিফ হল ফলব্যাক ফন্ট, তাই আপনাকে তাদের জন্য FontFaceObservers ঘোষণা করতে হবে না।

ফন্ট লোড সনাক্ত করুন

একটি ফন্ট লোড সনাক্ত করার জন্য কোড এই মত দেখায়:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() একটি প্রতিশ্রুতি যা ফন্ট লোড হলে সমাধান করে।

ডেমো সাইট দুটি ভিন্ন ফন্ট ব্যবহার করে, তাই আপনাকে উভয় ফন্ট লোড না হওয়া পর্যন্ত অপেক্ষা করতে Promise.all() ব্যবহার করতে হবে।

  • আপনার স্ক্রিপ্টে এই প্রতিশ্রুতি যোগ করুন, ঠিক ফন্টফেসঅবজারভারের নীচে যা আপনি ঘোষণা করেছেন: 
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️চেক-ইন করুন

আপনার স্ক্রিপ্ট এখন এই মত হওয়া উচিত:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

fonts-loaded ক্লাস প্রয়োগ করুন

  • এই লাইন দিয়ে স্ক্রিপ্টে /* Do things */ মন্তব্যটি প্রতিস্থাপন করুন: 
document.documentElement.classList.add("fonts-loaded");

উভয় ফন্ট লোড হয়ে গেলে এটি নথির মূল উপাদানে ( <html> ট্যাগ) fonts-loaded ক্লাস যোগ করে।

✔️চেক-ইন করুন

আপনার সম্পূর্ণ স্ক্রিপ্ট এই মত হওয়া উচিত:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

CSS আপডেট করুন

আপনার পৃষ্ঠাটি প্রাথমিকভাবে একটি সিস্টেম ফন্ট ব্যবহার করার জন্য স্টাইল করা উচিত এবং একবার fonts-loaded ক্লাস প্রয়োগ করা হলে কাস্টম ফন্টগুলি ব্যবহার করা উচিত।

  • CSS আপডেট করুন: 
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

যাচাই করুন

  • সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন ফুলস্ক্রিন .

যদি পৃষ্ঠাটি এরকম দেখায়, তাহলে আপনি সফলভাবে ফন্ট ফেস অবজারভার প্রয়োগ করেছেন এবং "অদৃশ্য পাঠ্যের ফ্ল্যাশ" থেকে মুক্তি পেয়েছেন।

একটি অভিশাপ ফন্টে একটি শিরোনাম৷