ফন্ট

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

ফন্ট ক্ষেত্র সমর্থন করে শর্তাবলী, এটি প্রকাশ করার জন্য সহজ শুধুমাত্র যখন একটি “custom typography” টগল চালু থাকে এবং এর মান প্রিন্ট করে টুইগ-সিনট্যাক্স টেমপ্লেট ইঞ্জিন আপনার CSS মধ্যে। উভয় গাইড সেটআপ এবং সীমাবদ্ধতা কভার করে।

অসদৃশ টাইপোগ্রাফি ক্ষেত্র, যা একটি নির্বাচকের মাধ্যমে কাজ করে এবং কোন টেমপ্লেট টোকেন নেই, ফন্ট ক্ষেত্রটি একটি টোকেন ক্ষেত্র। আপনি লিখুন font-family CSS প্যানেলে নিজেকে শাসন করুন এবং এতে ক্ষেত্রের মান প্রিন্ট করুন। এই পার্থক্যটি নির্ধারণ করে যে দুটি ক্ষেত্রের মধ্যে কোনটি প্রদত্ত উইজেটের প্রয়োজন।

ফন্ট ফিল্ড কি করে #

• উইজেটের এলিমেন্টর প্যানেলে একটি ফন্ট ফ্যামিলি ড্রপডাউন রেন্ডার করে, সিস্টেম ফন্ট এবং গুগল ফন্ট তালিকাভুক্ত করে।
• উদাহরণস্বরূপ, একটি প্লেইন স্ট্রিং হিসাবে নির্বাচিত পরিবার সংরক্ষণ করে Lora বা Georgia.
• মাধ্যমে যে স্ট্রিং মুদ্রণ {{ your_field_name }}, সাধারণত ভিতরে a font-family CSS প্যানেলে নিয়ম।
• ঠিক একটি সম্পত্তি নিয়ন্ত্রণ করে। আকার, ওজন, ব্যবধান এবং বাকিগুলি আপনার স্টাইলশীটে বা পৃথক নিয়ন্ত্রণে থাকে।
• একটি ডিফল্ট পরিবারের নাম নেয় তাই উইজেটটি ইচ্ছাকৃত টাইপফেস সহ পাঠানো হয়।

এখনও একটি উইজেট তৈরি করেননি? দ্য উইজেট নির্মাতা ওভারভিউ মাঠ পর্যায়ের ডক্সের আগে শুরু করার জায়গা।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? দেখা ইনস্টলেশন গাইড.
• উইজেট বিল্ডার এডিটরে একটি কাস্টম উইজেট খোলা। আমাদের উদাহরণ হল একটি পুল-কোট উইজেট যার নাম একটি ফন্ট ফিল্ড quote_font এটি শুধুমাত্র উদ্ধৃতি পাঠ্যের টাইপফেস পরিবর্তন করে।

কিভাবে একটি ফন্ট ক্ষেত্র যোগ করতে হয় #

টেনে আনুন ফন্ট ক্ষেত্র প্যানেল থেকে ক্ষেত্র অধীনে একটি বিভাগে শৈলী ট্যাব, এর প্রাকৃতিক বাড়ি, যদিও যেকোনো ট্যাব কাজ করে। এটি অবতরণ করার পরে এটির বিকল্পগুলি বাম দিকে খোলে।

ফন্ট ক্ষেত্রের বিকল্পগুলি ব্যাখ্যা করা হয়েছে #

বিকল্প তালিকাটি সংক্ষিপ্ত, যা ক্ষেত্রের বিন্দু:

• লেবেল: এলিমেন্টরে ড্রপডাউনের পাশে দেখানো পাঠ্য, উদাহরণস্বরূপ “ ফন্ট উদ্ধৃতি"৷।
• নাম: আপনার টেমপ্লেটগুলি যে অনন্য শনাক্তকারীকে উল্লেখ করে। অক্ষর, সংখ্যা, এবং আন্ডারস্কোর শুধুমাত্র, উদাহরণস্বরূপ quote_font.
• ডিফল্ট: পারিবারিক নামের স্ট্রিং উইজেট দিয়ে শুরু হয়, উদাহরণস্বরূপ Georgia। কেউ নিয়ন্ত্রণ স্পর্শ করার আগে ভাল রেন্ডার করে এমন কিছু বেছে নিন।

আপনার CSS প্যানেলে ফন্ট ক্ষেত্রটি সংযুক্ত করুন #

ফন্ট ফিল্ড হল একটি টোকেন ক্ষেত্র, এবং CSS প্যানেল হল যেখানে এর টোকেন রয়েছে। a এর ভিতরে মান প্রিন্ট করুন font-family নিয়ম করুন এবং সর্বদা একটি ফলব্যাক স্ট্যাকের সাথে এটি অনুসরণ করুন:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

টোকেনটি বাছাই করা পরিবারের নামের সাথে রেন্ডার করে, তাই উপরের নিয়মটি হয়ে যায় font-family: Lora, Georgia, serif; যখন একজন সম্পাদক লোরাকে বাছাই করেন। আকার এবং লাইনের উচ্চতা আপনার থাকে; নিয়ন্ত্রণ শুধুমাত্র টাইপফেস অদলবদল করে।

টোকেনটি এইচটিএমএল প্যানেলেও কাজ করে, উদাহরণস্বরূপ একটি শর্তসাপেক্ষে যা একটি নির্দিষ্ট পরিবার সক্রিয় থাকাকালীন একটি ক্লাস পরিবর্তন করে, কিন্তু CSS হল এটির জন্য ব্যবহারিক হোম।

সতর্ক থেকো: এই ড্রপডাউনে একটি Google ফন্ট বাছাই করা ফন্ট ফাইল লোড করে না। টাইপোগ্রাফি গ্রুপ কন্ট্রোলের বিপরীতে, ফন্ট ফিল্ড গুগল ফন্টকে স্বয়ংক্রিয়ভাবে সারিবদ্ধ করে না, তাই একটি নির্বাচিত ওয়েব ফন্ট তার ফলব্যাক হিসাবে রেন্ডার করে যদি না সাইটটি এটিকে অন্য কোনো উপায়ে লোড করে। হয় উইজেটটি ফন্টটি নিজেই লোড করে, একটি ছোট JS-প্যানেল ইনজেক্টর যা Google ফন্টের স্টাইলশীট লিঙ্কটি যুক্ত করে কাজ করে, অথবা সাইটটিতে ইতিমধ্যেই থাকা ফন্ট স্ট্যাকের প্রত্যাশা সীমিত করে। টোকেনের পরে সেই ফলব্যাক স্ট্যাকটি ঐচ্ছিক সজ্জা নয়; যখনই পরিবার লোড হয় না তখন দর্শকরা এটি দেখতে পান।

JS প্যানেলে একটি ন্যূনতম লোডার এইরকম দেখায়:

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

সেই লোডারে একটি সূক্ষ্মতা: getElementById একটি নির্দিষ্ট আইডিতে গার্ড কী, তাই যদি একই উইজেট দুটি ভিন্ন পরিবারের সাথে একটি পৃষ্ঠায় দুবার প্রদর্শিত হয়, শুধুমাত্র প্রথম উদাহরণের ফন্ট লোড হয়। দ্বিতীয়টি নিঃশব্দে ফিরে আসে। যদি প্রতি পৃষ্ঠায় একাধিক দৃষ্টান্ত আপনার উইজেটের জন্য একটি বাস্তবসম্মত দৃশ্য হয়, তাহলে পরিবর্তে পরিবারের নাম থেকে আইডিটি তৈরি করুন।

এলিমেন্টরে ফন্ট কন্ট্রোল ব্যবহার করুন #

Elementor-এর একটি পৃষ্ঠায় আপনার কাস্টম উইজেট যোগ করুন, অথবা পৃষ্ঠাটি ইতিমধ্যে খোলা থাকলে সম্পাদকটি পুনরায় লোড করুন। ফন্ট ক্ষেত্রটি আপনার লেবেলের অধীনে একটি ড্রপডাউন হিসাবে প্রদর্শিত হবে; এটি খুলুন এবং আপনি টাইপ করার সাথে সাথে পরিবারের তালিকা অনুসন্ধানযোগ্য।

একটি পরিবার এবং পূর্বরূপ আপডেট চয়ন করুন। উইজেট ফন্ট লোড করলে, ফাইলটি আসার সাথে সাথে নতুন টাইপফেসটি আঁকে। অন্যথায় উপাদানটি আপনার স্ট্যাক থেকে ফলব্যাকে রেন্ডার করে।

সাধারণ ব্যবহারের ক্ষেত্রে #

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

ফন্ট ক্ষেত্রের সাথে কাজ করার জন্য টিপস #

• সর্বদা একটি ফলব্যাক স্ট্যাক লিখুন। font-family: {{ quote_font }}, Georgia, serif; বাছাই করা ফন্ট লোড না হলে উইজেটটিকে পাঠযোগ্য রাখে।
• মনে রাখবেন কোন স্বয়ংক্রিয় সারি নেই। এখানে বাছাই করা Google ফন্টগুলির উইজেটে একটি লোডার বা একটি সাইট প্রয়োজন যা সেগুলি ইতিমধ্যেই লোড করে; যে ক্ষেত্রের এক ধারালো প্রান্ত।
• আপনার যখন আরও প্রয়োজন তখন টাইপোগ্রাফির জন্য পৌঁছান। আকার, ওজন, ব্যবধান, প্রতিক্রিয়াশীল মান, এবং স্বয়ংক্রিয় ফন্ট লোডিং সবই এর অন্তর্গত টাইপোগ্রাফি ক্ষেত্র। ফন্ট শুধুমাত্র পরিবারের ক্ষেত্রে।
• একটি বাস্তব ডিফল্ট সেট করুন। থিম ক্যাসকেড যাই হোক না কেন একটি সুস্পষ্ট প্রারম্ভিক পরিবার উত্তরাধিকারসূত্রে বীট করে।
• টোকেনটি CSS এ রাখুন। এইচটিএমএল এর মাধ্যমে ছড়িয়ে ছিটিয়ে থাকা ইনলাইন স্টাইল অ্যাট্রিবিউটের চেয়ে CSS প্যানেলে একটি নিয়ম বজায় রাখা সহজ।
• এখানে একটি নির্বাচক শর্টকাট আশা করবেন না। এই ক্ষেত্রের জন্য প্রাকৃতিক তারের আপনার নিজের টোকেন হয় font-family নিয়ম, যেখানে আপনি ফলব্যাকগুলিও নিয়ন্ত্রণ করেন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

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