ফন্ট এইচটিএমএল পরিবর্তন করুন:একটি কিভাবে-টু গাইড

ফন্ট-ফ্যামিলি সিএসএস নিয়ম আপনাকে একটি HTML ওয়েব ডকুমেন্টের ফন্ট সংজ্ঞায়িত করতে দেয়। বহিরাগত ফন্ট উল্লেখ করতে, আপনি একটি ফন্ট মুখ সংজ্ঞায়িত করতে url() পদ্ধতি ব্যবহার করতে পারেন। অথবা, আপনি Google ফন্টের মত একটি সাইট থেকে একটি ফন্ট CSS ফাইল এম্বেড করতে পারেন।

বিকাশকারী হিসাবে, এমন একটি সময় আসবে যখন আমরা আমাদের এইচটিএমএল প্রক্রিয়া করার সময় পপুলেটেড ডিফল্ট ফন্ট ব্যবহার করতে চাই না। এই নিবন্ধটি আপনাকে দেখানোর লক্ষ্য রাখে কিভাবে আপনার HTML নথিতে সর্বোত্তম অনুশীলন ব্যবহার করে ফন্ট পরিবর্তন করতে হয়।

এইচটিএমএল-এ কীভাবে ফন্ট পরিবর্তন করবেন

HTML এ একটি ওয়েব পেজের ফন্ট পরিবর্তন করার তিনটি উপায় রয়েছে:

ফন্ট-ফ্যামিলি নিয়মের সাথে একটি বিল্ট-ইন ফন্ট ব্যবহার করা।
বাহ্যিক ফন্ট উল্লেখ করতে ফন্ট-ফেস নিয়ম ব্যবহার করে।
একটি ওয়েব পেজে ফন্ট স্টাইল করার জন্য একটি বাহ্যিক CSS স্টাইল শীট ব্যবহার করা।

এই নিবন্ধে, আমরা ফন্ট পরিবর্তন করার এই পদ্ধতিগুলির প্রতিটি সম্পর্কে কথা বলব।

এইচটিএমএল পরিবর্তন ফন্ট:বিল্ট-ইন ফন্ট-ফ্যামিলি

আমাদের ফন্ট পরিবর্তন করার প্রথম উপায় হল আমাদের ইনলাইন স্টাইলিং-এ ফন্ট-ফ্যামিলি প্রপার্টি ব্যবহার করে। এটি এভাবে করা যেতে পারে:

<p style="font-family:wingdings;" id="wingdings">New York</p>

আমরা কেবল ফন্ট-ফ্যামিলি ব্যবহার করি আমাদের পাঠ্যের ব্লকে আমরা কোন ফন্ট ব্যবহার করতে চাই তা নির্দেশ করার বৈশিষ্ট্য। অনেক স্ট্যান্ডার্ড ফন্ট ব্যবহার করার জন্য সহজেই উপলব্ধ।

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

<p style="font-family: Roboto, Lato, sans-serif" 
id="roboto-plus-backups">New York</p>

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

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগদানের পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

HTML পরিবর্তন ফন্ট:একটি ফন্ট-ফেস ব্যবহার করে

আপনি আপনার ওয়েব পৃষ্ঠায় একটি বহিরাগত উত্স থেকে একটি ফন্ট আমদানি করতে ফন্ট-ফেস নিয়ম ব্যবহার করতে পারেন৷

এই পদ্ধতি ব্যবহার করার জন্য, আপনার একটি বহিরাগত ফন্ট নথিতে অ্যাক্সেস থাকতে হবে। ফন্ট ডকুমেন্টে সাধারণত ".ttf" এক্সটেনশন থাকে।

ফন্ট-ফেস অ্যাট্রিবিউট ব্যবহার করে কীভাবে ফন্ট পরিবর্তন করা যায় তা দেখে নেওয়া যাক। এখানে CSS শৈলীর নিয়মটি আমাদের ব্যবহার করতে হবে:

@font-face {
	font-family: "Open Sans";
	src: url(yoururl);
}

আমরা আমাদের নতুন ফন্ট ঘোষণা করতে ফন্ট-ফেস শৈলী বৈশিষ্ট্য ব্যবহার করি। ফন্ট-ফ্যামিলি অ্যাট্রিবিউট আমাদের নতুন ফন্টের নাম নির্ধারণ করে। src:url() আমাদের সিএসএস ডকুমেন্টকে নির্দেশ দেয় যে আমাদের ফন্ট কোথায় পাওয়া যাবে। "yoururl" এর মান আপনার পাঠ্য ফন্টের URL হওয়া উচিত।

আমাদের ফন্ট আমাদের ওয়েব পেজ পরিবর্তন করবে না। আমাদের CSS স্টাইল শীটকে বলতে হবে কোন উপাদানগুলি আমাদের নতুন ফন্ট ব্যবহার করবে:

h1, h2, h3 {
	font-family: "Open Sans";
}

এই কোডটি আমাদের CSS স্টাইল শীটকে আমাদের ওয়েব পৃষ্ঠার কিছু উপাদানে “Open Sans” ফন্ট প্রয়োগ করতে বলে। h1, h2, h3 হল একটি CSS নির্বাচক যা তালিকাভুক্ত উপাদানগুলিতে আমাদের শৈলী প্রয়োগ করে। এই উপাদানগুলি হল HTML শিরোনাম৷

৷

ফন্ট HTML পরিবর্তন করুন:বাহ্যিক CSS ফন্ট

গুগল ফন্টের মতো কিছু সাইট আপনাকে একটি সিএসএস স্টাইল শীট ব্যবহার করে আপনার সাইটে একটি ফন্ট এম্বেড করতে দেয়। এই শৈলীগুলি আপনাকে CSS বৈশিষ্ট্যগুলি ব্যবহার করে ফন্টের প্রকারগুলি সংজ্ঞায়িত করতে দেয়। এই উদাহরণে, আমরা Google ফন্ট থেকে 'Bangers' এবং 'Yellowtail' ফন্ট ব্যবহার করার চেষ্টা করব:

<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p>
<p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>

আপনি যদি আপনার পছন্দের IDE-তে উপরের কোডটি চালান এবং এটি লোড করেন, তাহলে এটি জেনেরিক ফন্টে ডিফল্ট হবে। আপনি যদি এই ফন্টগুলি ব্যবহার করতে চান তবে আপনি কয়েকটি সহজ ক্লিকের মাধ্যমে করতে পারেন:

Google ফন্টে যান।
যদি আপনি চান সাইটটির সাথে খেলার জন্য সময় নিন। এখানে ফন্টের জন্য অনেক অপশন আছে। আপনি যা চান তা দিয়ে নমুনা পাঠ্যটি কাস্টমাইজ করতে পারেন। আপনি যা চান তা প্রবেশ করার জন্য ওয়েব পৃষ্ঠার শীর্ষে একটি ইনপুট রয়েছে৷
'ইয়েলোটেল' অনুসন্ধান করুন এবং এটিতে ক্লিক করুন। আপনি ফন্ট সম্পর্কে বিস্তারিত তথ্য সহ একটি পর্দায় আসা উচিত. একটি “+ এই শৈলী নির্বাচন করুন খুঁজুন ” বোতাম এবং এটিতে ক্লিক করুন৷
আপনার নির্বাচন সম্পর্কে তথ্য সহ একটি সাইডবার ড্রয়ার পপ আউট হওয়া উচিত। আপনি আরও ফন্ট ব্রাউজ করার সময় এটি খোলা থাকবে। ব্রাউজ ফন্ট এ ক্লিক করুন স্ক্রিনের শীর্ষে লিঙ্ক করুন এবং 'ব্যাঙ্গার্স' অনুসন্ধান করুন। আপনি 'ইয়েলোটেইল'-এর জন্য যেভাবে করেছেন সেই একই প্রক্রিয়ার মধ্য দিয়ে হাঁটুন।
সাইডবারে, আপনি 'এম্বেড'-এর জন্য একটি ট্যাব দেখতে পাবেন। এটিতে ক্লিক করুন৷
দি বিকল্পটি ইতিমধ্যে হাইলাইট করা উচিত। কপি এবং পেস্ট করুন আপনার HTML এর মাথায়।
সিএসএস-এ প্রতিটি ফন্ট কীভাবে ব্যবহার করবেন তার জন্য প্রদত্ত নির্দেশিকা অনুসরণ করুন। তারা সুপারিশকৃত ব্যাকআপ ফন্টও দেয়।
এটাই! আপনি আপনার নথিতে এই ফন্টগুলি ব্যবহার করতে প্রস্তুত৷

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet">
 
 </head>
 <body>
   <p id="courier">New York</p>
   <p id="roboto">New York</p>
   <p id="raleway" style="font-family: Raleway, sans-serif">New York</p>
   <p id="serif" style="font-family: Courier New">New York</p>
   <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p>
   <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p>
   <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
   <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p>
 </body>
</html>

উপরের কাজের ডেমো দেখায় যে বিল্ট-ইন এবং তৃতীয় পক্ষের ফন্ট ব্যবহার করা হচ্ছে। অন্যান্য ফন্ট আমদানিতে আপনার হাত চেষ্টা করুন!

উপসংহার

আপনি ফন্ট-ফ্যামিলি অ্যাট্রিবিউট ব্যবহার করে বা কাস্টম ফন্ট সহ একটি বাহ্যিক CSS স্টাইল শীট ব্যবহার করে একটি HTML ফন্ট পরিবর্তন করতে পারেন। আপনার সাইটের CSS-এ একটি কাস্টম ফন্ট এম্বেড করতে, আপনি ফন্ট-ফেস নিয়ম ব্যবহার করতে পারেন।

আপনি কি HTML এ কোডিং সম্পর্কে আরও জানতে চান? আমাদের এইচটিএমএল গাইড কীভাবে শিখবেন তা পড়ুন। এই নির্দেশিকাটিতে আপনি কীভাবে এইচটিএমএল শিখবেন সেই বিষয়ে সেরা টিপস এবং সেইসাথে সেরা অনলাইন কোর্সগুলির নির্দেশিকা পাবেন৷