Ads

Html Fonts in Bengali | HTML Font Tutorial in Bangla

Html Fonts in Bengali | HTML Font Tutorial in Bangla
HTML FONTS
Set Font Size:

HTML এ আপনি CSS ( ক্যাসকেডিং স্টাইল শীট ) ফন্ট আকার বৈশিষ্ট্য ব্যবহার করে পাঠ্যের বা Text এর ফন্টের আকার সেট করতে পারেন। যেমন পিক্সেল (px), ems (em), বা শতাংশ (%) এখানে একটি উদাহরণ দেওয়া হল - 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size */ p { font-size: 16px; /* 16 pixels */ } </style> </head> <body> <p>This is a paragraph with a font size of 16 pixels.</p> </body> </html>


উপরের উদাহরণে <p> উপাদানটির জন্য CSS শৈলী ফন্ট সাইজের বৈশিষ্ট্যকে 16px এ সেট করে যার অর্থ অনুচ্ছেদ বা Paragraph উপাদানের ভিতরের পাঠ্যটি 16 পিক্সেলের ফন্ট আকারে প্রদর্শিত হবে।

আপনি ফন্টের আকার সেট করতে অন্যান্য ইউনিটগুলিও ব্যবহার করতে পারেন, যেমন em বা % যা আপেক্ষিক ইউনিট যা মূল উপাদান বা ব্যবহারকারীর সেটিংসের প্রেক্ষাপটের উপর ভিত্তি করে আরও নমনীয় আকারের জন্য অনুমতি দেয়। উদাহরণ স্বরূপঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size in em units */ p { font-size: 1.2em; /* 1.2 times the font size of the parent element */ } </style> </head> <body> <p>This is a paragraph with a font size of 1.2em, which is 1.2 times the font size of the parent element.</p> </body> </html>


অথবাঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size in percentage */ p { font-size: 120%; /* 120% of the default font size */ } </style> </head> <body> <p>This is a paragraph with font size of 120%, which is 120% of the default font size.</p> </body> </html>


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

Relative Font Size:

HTML এ আপনি CSS ( ক্যাসকেডিং স্টাইল শীট ) ব্যবহার করে আপেক্ষিক ফন্টের আকার সেট করতে পারেন। আপেক্ষিক ফন্টের আকারগুলি একটি মূল উপাদানের ফন্টের আকার বা ব্রাউজারের ডিফল্ট ফন্ট আকারের সাথে সম্পর্কিত। 

CSS আপেক্ষিক ফন্টের আকারের জন্য আপনি ব্যবহার করতে পারেন এমন বেশ কয়েকটি ইউনিট রয়েছে। এখানে কিছু উদাহরণঃ- 

1. em: 

em ইউনিট উপাদানটির নিকটতম অভিভাবক বা উপাদানটির ফন্টের আকার উপস্থাপন করে। উদাহরণ স্বরূপঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size in em units */ p { font-size: 1.2em; /* 1.2 times the font size of the parent element */ } </style> </head> <body> <p>This is a paragraph with a font size of 1.2em, which is 1.2 times the font size of the parent element.</p> </body> </html>

2. rem: 

rem ইউনিট রুট এলিমেন্টের (<html>) ফন্ট সাইজকে উপস্থাপন করে, যা সাধারণত ব্রাউজারের ফন্ট সাইজ। উদাহরণ স্বরূপঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size in rem units */ p { font-size: 1.2rem; /* 1.2 times the font size of the root element */ } </style> </head> <body> <p>This is a paragraph with a font size of 1.2rem, which is 1.2 times the font size of the root element.</p> </body> </html>


3. % ( Percentage): 

শতাংশ একক মূল উপাদানের ফন্ট আকারের শতাংশের প্রতিনিধিত্ব করে। উদাহরণ স্বরূপঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size in percentage */ p { font-size: 120%; /* 120% of the default font size */ } </style> </head> <body> <p>This is a paragraph with font size of 120%, which is 120% of the default font size.</p> </body> </html>


আপেক্ষিক ফন্ট আকার ব্যবহার করে আপনার ওয়েব পৃষ্ঠাগুলিকে আরও প্রতিক্রিয়াশীল এবং বিভিন্ন ডিভাইস এবং স্ক্রীন আকারের সাথে মানিয়ে নিতে সাহায্য করতে পারে৷ ভাল অ্যাক্সেসিবিলিটি এবং ব্যবহারকারীর অভিজ্ঞতার জন্য সাধারণত নির্দিষ্ট ফন্টের আকারের (যেমন, px) পরিবর্তে আপেক্ষিক ফন্টের আকার ব্যবহার করার পরামর্শ দেওয়া হয়।

Setting Font Face:

HTML এ, আপনি CSS (ক্যাসকেডিং স্টাইল শীট) ব্যবহার করে ফন্ট ফেস বা ফন্ট ফ্যামিলি সেট করতে পারেন। ফন্ট ফেস টাইপফেস বা ফন্ট নির্ধারণ করে যা একটি HTML উপাদানের মধ্যে টেক্সটে প্রয়োগ করা হবে। এখানে একটি উদাহরণঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font face */ p { font-family: Arial, sans-serif; /* Font face fallback: Arial, sans-serif */ } </style> </head> <body> <p>This is a paragraph with font face set to Arial, sans-serif.</p> </body> </html>


উপরের উদাহরণে, font-family প্রপার্টি <p> এলিমেন্টের জন্য ফন্ট ফেস সেট করতে ব্যবহৃত হয়। মান "Arial" হল প্রথম পছন্দের ফন্ট ফেস, এবং ব্যবহারকারীর সিস্টেমে Arial উপলব্ধ না হলে, ব্রাউজারটি sans-serif জেনেরিক ফন্ট ফ্যামিলি ব্যবহার করে একটি sans-serif ফন্টে (যেমন, Helvetica, Verdana) ফিরে আসবে।

আপনি ফন্ট-ফ্যামিলি প্রপার্টিতে কমা-বিভক্ত তালিকা হিসাবে একাধিক ফন্ট ফেস নির্দিষ্ট করতে পারেন। ব্রাউজারটি তালিকা থেকে প্রথম উপলব্ধ ফন্ট ফেস ব্যবহার করবে। উদাহরণ স্বরূপঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting multiple font faces */ p { font-family: Arial, Helvetica, sans-serif; /* Arial, Helvetica, sans-serif */ } </style> </head> <body> <p>This is a paragraph with multiple font faces specified.</p> </body> </html>

এটি লক্ষ করা গুরুত্বপূর্ণ যে ফন্টের মুখগুলির প্রাপ্যতা ব্যবহারকারীর সিস্টেম এবং তাদের ডিভাইসে ইনস্টল করা ফন্টগুলির উপর নির্ভর করে ৷ 

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

Specify Alternate Font Faces:

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

<!DOCTYPE html> <html> <head> <style> /* CSS style for specifying alternate font faces */ p { font-family: "Helvetica Neue", Arial, sans-serif; /* First choice: Helvetica Neue, Second choice: Arial, Third choice: sans-serif */ } </style> </head> <body> <p>This is a paragraph with alternate font faces specified.</p> </body> </html>


উপরের উদাহরণে, font-family প্রপার্টি <p> এলিমেন্টের জন্য ফন্ট ফেস সেট করতে ব্যবহৃত হয়। মান "Helvetica Neue" হল প্রথম পছন্দের ফন্ট ফেস, এবং যদি Helvetica Neue ব্যবহারকারীর সিস্টেমে উপলভ্য না থাকে, তাহলে ব্রাউজারটি Arial-এ ফিরে যাবে, এবং যদি Arial ও উপলব্ধ না হয়, তাহলে এটি আবার সানসে ফিরে যাবে serif  ফন্ট ( যেমন, Helvetica, Verdana) sans-serif জেনেরিক ফন্ট পরিবার ব্যবহার করে।

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

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

Setting Font Color:


HTML এ আপনি CSS ব্যবহার করে একটি উপাদানের ফন্টের রঙ সেট করতে পারেন রঙ সম্পত্তি দ্য রঙ প্রপার্টি আপনাকে বিভিন্ন রঙের মান যেমন নামকৃত রং, হেক্সাডেসিমাল RGB মান, RGB মান বা HSL মান ব্যবহার করে পছন্দসই ফন্টের রঙ নির্দিষ্ট করতে দেয়। এখানে কিছু উদাহরণঃ- 

1. Using Named Colors:

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font color using named color */ p { color: red; /* Set font color to red */ } </style> </head> <body> <p>This is a paragraph with red font color.</p> </body> </html>

2. Using Hexadecimal RGB Values:

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font color using hexadecimal RGB value */ p { color: #ff0000; /* Set font color to red using hexadecimal RGB value */ } </style> </head> <body> <p>This is a paragraph with red font color using hexadecimal RGB value.</p> </body> </html>


3. Using RGB Values:

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font color using RGB value */ p { color: rgb (255, 0, 0); /* Set font color to red using RGB value */ } </style> </head> <body> <p>This is a paragraph with red font color using RGB value.</p> </body> </html>

4. Using HSL Values:


<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font color using HSL value */ p { color: hsl(0, 100%, 50%); /* Set font color to red using HSL value */ } </style> </head> <body> <p>This is a paragraph with red font color using HSL value.</p> </body> </html>

আপনি রঙের মান প্রতিস্থাপন করতে পারেন ( red,#ff0000, rgb(255, 0, 0), hsl(0, 100%, 50%)) আপনার পছন্দসই ফন্টের রঙ অনুযায়ী অন্য কোনো বৈধ রঙের মান সহ।

<basefont> Element:

<বেসফন্ট> element হল একটি অপ্রচলিত HTML উপাদান যা পুরো নথির জন্য ডিফল্ট ফন্টের আকার, রঙ এবং মুখ নির্দিষ্ট করতে HTML এর পুরানো সংস্করণে ব্যবহৃত হয়েছিল। যাইহোক, এটি HTML5-এ সমর্থিত নয় এবং আধুনিক ওয়েব ডেভেলপমেন্টে ব্যবহারের জন্য সুপারিশ করা হয় না।

ব্যবহার করার পরিবর্তে <বেসফন্ট> উপাদান, আপনার HTML নথি স্টাইল করতে CSS ( ক্যাসকেডিং স্টাইল শীট ) ব্যবহার করার পরামর্শ দেওয়া হয়। 

CSS ওয়েব পৃষ্ঠাগুলির উপস্থিতির উপর অনেক বেশি নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করে। একটি HTML নথির জন্য ফন্টের আকার, রঙ এবং মুখ সেট করতে আপনি কীভাবে CSS ব্যবহার করতে পারেন তার একটি উদাহরণ এখানে দেওয়া হলঃ- 

<!DOCTYPE html> <html> <head> <style> /* CSS style for setting font size, color, and face */ body { font-size: 16px; /* Set font size to 16 pixels */ color: #000000; /* Set font color to black */ font-family: Arial, sans-serif; /* Set font face to Arial or sans-serif */ } </style> </head> <body> <p>This is a paragraph with a custom font size, color, and face.</p> </body> </html>


উপরের উদাহরণে, CSS কোড অন্তর্ভুক্ত করা হয়েছেএকটি <style> মধ্যে উপাদান<head> HTML নথির বিভাগ। অক্ষর এর আকার, রঙ, এবং ফন্ট পরিবার বৈশিষ্ট্যগুলি যথাক্রমে সমগ্র নথির জন্য পছন্দসই ফন্টের আকার, রঙ এবং মুখ সেট করতে ব্যবহৃত হয়। আপনি আপনার প্রয়োজন অনুসারে এই মানগুলি সামঞ্জস্য করতে পারেন।

<basefont> Element Example:

অবশ্যই, এখানে কিভাবে একটি উদাহরণ <বেসফন্ট>  উপাদানটি HTML এর পুরানো সংস্করণগুলিতে ব্যবহৃত হয়েছিলঃ- 

<!DOCTYPE html> <html> <head> <basefont size="4" color="#FF0000" face="Arial"> </head> <body> <p>This is a paragraph with custom font size, color, and face using &lt;basefont&gt; element.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>


উপরের উদাহরণে,<বেসফন্ট> উপাদান অন্তর্ভুক্ত করা হয়<মাথা> HTML নথির বিভাগ। দ্যআকার,রঙ, এবংমুখ বৈশিষ্ট্যগুলি যথাক্রমে সম্পূর্ণ নথির জন্য বেস ফন্টের আকার, রঙ এবং মুখ সেট করতে ব্যবহৃত হয়। 

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

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section