একটি ওয়েব পেজে টেক্সট স্টাইল করা ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ অংশ। উদাহরণস্বরূপ, আপনি একটি নির্দিষ্ট ফন্টে হেডার বা serif ব্যবহার করার জন্য একটি পৃষ্ঠার সমস্ত পাঠ্য প্রদর্শন করতে চাইতে পারেন। ফন্ট
এখানেই CSS ফন্ট-ফ্যামিলি প্রপার্টি আসে। CSS ফন্ট-ফ্যামিলি প্রপার্টি আপনাকে এক বা একাধিক ফন্ট ফ্যামিলি নির্দিষ্ট করতে দেয় যা একটি ওয়েব পেজে টেক্সট স্টাইল করতে ব্যবহার করা হবে।
এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করবে, CSS ফন্ট-ফ্যামিলি প্রপার্টির বুনিয়াদি এবং কিভাবে আপনি একটি ওয়েব পেজে টেক্সট স্টাইল করার জন্য প্রপার্টি ব্যবহার করতে পারেন।
CSS ফন্ট পরিবার
সিএসএস-এ একটি ফন্ট স্টাইল করার সাথে অনেকগুলি দিক জড়িত, একটি রঙ সেট করা থেকে ফন্টের আকার পর্যন্ত। একটি ফন্ট স্টাইল করার সবচেয়ে গুরুত্বপূর্ণ অংশগুলির মধ্যে একটি হল, ফন্ট পরিবার সেট করা - একটি ওয়েব পৃষ্ঠায় পাঠ্য দ্বারা ব্যবহৃত শৈলী।
একটি ওয়েব পৃষ্ঠায় পাঠ্য দ্বারা ব্যবহৃত ফন্ট পরিবার সেট করতে, আপনি ফন্ট-ফ্যামিলি সম্পত্তি ব্যবহার করতে পারেন। ফন্ট-ফ্যামিলি প্রপার্টির সিনট্যাক্স নিম্নরূপ:
font-family: fontFamilyOne, fontFamilyTwo, …;
ফন্ট-ফ্যামিলি প্রপার্টি হয় একটি একক ফন্ট বা ফন্টের একটি তালিকা গ্রহণ করে। আপনি যদি একাধিক ফন্ট উল্লেখ করেন, তাহলে আপনার প্রতিটি ফন্টকে কমা দিয়ে আলাদা করা উচিত।
যে ক্রমানুসারে ফন্টগুলি প্রদর্শিত হবে সেই ক্রমে ব্রাউজার ফন্টগুলি প্রয়োগ করার চেষ্টা করবে। ব্রাউজারটি ডিফল্ট তালিকার প্রথম ফন্টটি ব্যবহার করবে যা হয় ইনস্টল করা আছে বা ওয়েব ব্রাউজার দ্বারা ডাউনলোড করা যেতে পারে। যদি সেই ফন্টটি উপলব্ধ না হয়, তাহলে দ্বিতীয় ফন্টটি ব্যবহার করা হবে, ইত্যাদি।
এটি লক্ষ্য করা গুরুত্বপূর্ণ যে ফন্ট-ফ্যামিলি প্রপার্টি পাঠ্যের একটি ব্লকে প্রতিটি অক্ষরের জন্য একটি ফন্ট নির্বাচন করবে। সুতরাং, যদি একটি ফন্টে একটি নির্দিষ্ট অক্ষর পাওয়া না যায়, তবে একটি উপযুক্ত ফন্ট পাওয়া না যাওয়া পর্যন্ত আপনার ফন্ট ফ্যামিলি লিস্টের পরবর্তী ফন্টটি চেষ্টা করা হবে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
আপনি যখন ফন্ট-ওয়েট প্রপার্টি ব্যবহার করছেন, তখন অন্তত একটি জেনেরিক ফন্ট ফ্যামিলি নাম (যেমন সেরিফ, সান-সেরিফ, বা মনোস্পেস) অন্তর্ভুক্ত করা ভাল। এটি নিশ্চিত করে যে আপনার তালিকায় অন্য ফন্ট উপলব্ধ না হলে, ব্রাউজারটি এখনও একটি ওয়েব পৃষ্ঠায় প্রদর্শিত পাঠ্যের জন্য একটি ফন্ট নির্বাচন করতে সক্ষম হবে৷
দুটি উপায়ে আপনি ফন্ট-ফ্যামিলি প্রপার্টি ব্যবহার করতে পারেন। প্রথমত, আপনি একটি ওয়েব পৃষ্ঠার জন্য একটি কাস্টম ফন্ট নির্দিষ্ট করতে সম্পত্তি ব্যবহার করতে পারেন। দ্বিতীয়ত, আপনি একটি ওয়েব পৃষ্ঠায় পাঠ্যের জন্য একটি জেনেরিক ফন্ট পরিবার প্রয়োগ করতে সম্পত্তি ব্যবহার করতে পারেন। ফন্ট-ফ্যামিলি সম্পত্তির সাথে ব্যবহারের জন্য উপলব্ধ জেনেরিক ফন্ট পরিবারগুলি নিম্নরূপ:
- সেরিফ:অক্ষরগুলি সেরিফ টাইপফেস ব্যবহার করে (যেমন লুসিডা ব্রাইট, প্যালাডিও)।
- sans-serif:অক্ষরগুলি sans-serif টাইপফেস ব্যবহার করে (যেমন Open Sans, Trebuchet MS)।
- মনোস্পেস:অক্ষরের সকলের প্রস্থ একই (যেমন মনোস্পেস, মেনলো)।
- অভিশাপ:অক্ষরগুলির একটি যোগদানের স্ট্রোক রয়েছে (যেমন লুসিডা ক্যালিগ্রাফি)।
- ফ্যান্টাসি:অক্ষরগুলির প্রতি মনোযোগ আকর্ষণ করতে ব্যবহৃত আলংকারিক ফন্টগুলি (যেমন প্যাপিরাস)।
অন্যান্য জেনেরিক ফন্ট ফ্যামিলি পাওয়া যায়, যেগুলো আপনি Mozilla CSS ফন্ট-ফ্যামিলি ডকুমেন্টেশনে আরও গভীরভাবে পড়তে পারেন।
এখন যেহেতু আমরা ফন্ট-ফ্যামিলি প্রপার্টির মূল বিষয়গুলি জানি, আমরা এটি কীভাবে কাজ করে তার কয়েকটি উদাহরণ দিয়ে চলতে পারি।
CSS ফন্ট ফ্যামিলি উদাহরণ
আমাদের একটি স্থানীয় স্ট্যাম্প ক্লাব, দ্য সিয়াটল স্ট্যাম্প ক্লাব, তাদের ওয়েবসাইটে নির্দিষ্ট অংশের ফন্ট কাস্টমাইজ করতে বলেছে।
প্রথমত, "ওপেন সানস" ফন্ট ব্যবহার করার জন্য আমাদের তাদের "যোগাযোগ" পৃষ্ঠায় সমস্ত
শিরোনামের ফন্ট পরিবর্তন করতে বলা হয়েছে। সুতরাং, উদাহরণস্বরূপ, তাদের ওয়েবসাইটের "যোগাযোগ" পৃষ্ঠায় "আমাদের সাথে যোগাযোগ করুন" শিরোনামটি Open Sans-এ উপস্থিত হওয়া উচিত। যদি সেই ফন্টটি উপলব্ধ না হয়, তাহলে জেনেরিক "সান-সেরিফ" পরিবার ব্যবহার করা উচিত। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি: <html>
<h1>Contact Us</h1>
<style>
h1 {
font-family: "Open Sans", sans-serif;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের এইচটিএমএল কোডে, আমরা একটি
ট্যাগ ব্যবহার করে একটি শিরোনাম নির্দিষ্ট করেছি যাতে লেখা আছে Contact Us . তারপর, আমাদের CSS কোডে, আমরা আমাদের ওয়েব পেজে উপাদানগুলির ফন্ট সংজ্ঞায়িত করতে font-family ব্যবহার করেছি।
আমরা ফন্ট-ফ্যামিলি প্রপার্টিতে যে মান নির্ধারণ করেছি তা সমস্ত
উপাদানের ফন্টকে Open Sans-এ সেট করে। , এবং যদি সেই ফন্টটি উপলব্ধ না হয়, জেনেরিক sans-serif পরিবার ব্যবহার করা হয়। এটি সম্পন্ন করার জন্য, আমরা একটি কমা দ্বারা পৃথক দুটি ফন্ট নির্দিষ্ট করেছি।
এখন, ধরুন আমরা স্ট্যাম্প ক্লাবের Contact-এর সমস্ত
উপাদানগুলিকেও স্টাইল করতে চেয়েছিলাম টাইমস ফন্ট ব্যবহার করার জন্য পৃষ্ঠা। যদি সেই ফন্টটি উপলব্ধ না হয়, একটি ডিফল্ট সেরিফ ফন্ট ব্যবহার করা উচিত। আমরা এই কাজটি সম্পন্ন করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p {
font-family: "Times", serif;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের উদাহরণে, আমরা
ট্যাগ ব্যবহার করে পাঠ্যের একটি অনুচ্ছেদ ঘোষণা করেছি। তারপর, আমরা Times ব্যবহার করার জন্য আমাদের CSS স্টাইল শীটে সমস্ত
ট্যাগের ফন্ট-ফ্যামিলি সেট করি। এবং serif ফন্ট ডিফল্টরূপে, ব্রাউজারটি Times-এ সমস্ত
ট্যাগ রেন্ডার করার চেষ্টা করবে ফন্ট এই ফন্টটি উপলব্ধ না হলে, serif ফন্ট ব্যবহার করা হয়।
উপসংহার
CSS ফন্ট-ফ্যামিলি প্রপার্টি আপনাকে একটি ওয়েব পেজে লেখার স্টাইল নির্দিষ্ট করতে দেয়। উদাহরণস্বরূপ, আপনি "Arial" ফন্ট ব্যবহার করতে ফন্ট-ফ্যামিলি প্রপার্টি ব্যবহার করতে পারেন, অথবা একটি ওয়েব পৃষ্ঠায় সমস্ত পাঠ্যের জন্য "অভিশাপ" জেনেরিক ফন্ট ব্যবহার করতে পারেন।
এই টিউটোরিয়ালটি উদাহরণের রেফারেন্স সহ, CSS ফন্ট-ফ্যামিলি প্রপার্টির বুনিয়াদি এবং আপনি কীভাবে একটি ওয়েব পেজে টেক্সট স্টাইল করতে এটি ব্যবহার করতে পারেন তা নিয়ে আলোচনা করা হয়েছে। এখন আপনি একজন মাস্টার ওয়েব ডিজাইনারের মতো ফন্ট-ফ্যামিলি প্রপার্টি ব্যবহার শুরু করতে প্রস্তুত!
