সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস(৩) @font-face


@font-face প্রোপার্টির এর মাধ্যমে একজন ওয়েব-ডিজাইনার ঐ সকল ফন্ট ব্যবহার করতে পারে যা ব্যবহারকারীর কম্পিউটারে ইনস্টল করা থাকে না।

সুতরাং আপনি যদি আপনার ওয়েব সাইটে আপনার ইচ্ছামত বা নিজের তৈরি ফন্ট ব্যবহার করতে চান, তাহলে আপনার সার্ভারে উক্ত ফন্ট ফাইলটি যুক্ত করুন। এরপরে ব্যবহারকারী যখন আপনার সাইট ভিজিট করবে তখন ফন্ট ফাইলটি স্বয়ংক্রিয়ভাবে তার ডিভাইজে ডাউনলোড হবে এবং সে আপনার নিজের ব্যবহৃত ফন্টেই সাইট এর কন্টেন্ট দেখবে।

এক কথায় আপনি সিএসএস(৩) @font-face এর মধ্যে আপনার ওয়েব সাইটে নিজস্ব ফন্ট ব্যবহার করতে পারবেন।


এক নজরে সিএসএস(৩) ফন্ট প্রোপার্টিসমূহ

নিন্মের টেবিলে @font-face এ ব্যবহত সবগুলো প্রোপার্টির মান সম্পর্কে আলোচনা করা হলো।

প্রোপার্টি ভ্যালু বর্ণনা
font-display auto
block
swap
fallback
optional
ঐচ্ছিক। ফন্ট কিভাবে প্রদর্শিত হবে তা নির্ধারণ করে।
font-family name আবশ্যক। ফন্টের নাম নির্ধারণ করে।
src URL আবশ্যক। ফন্ট ফাইলের URL নির্ধারণ করে।
font - stretch normal
condensed
ultra - condensed
extra - condensed
semi - condensed
expanded
semi - expanded
extra - expanded
ultra - expanded
ঐচ্ছিক। ফন্ট এর বিস্তৃতি কেমন হবে তা নির্ধারণ করে। এটির ডিফল্ট মান "normal"।
font-style normal
italic
oblique
ঐচ্ছিক। ফন্ট স্টাইল কেমন হবে তা নির্ধারণ করে। এটির ডিফল্ট মান "normal"।
font-weight normal
bold
100
200
300
400
500
600
700
800
900
ঐচ্ছিক। ফন্ট কেমন মোটা দেখাবে তা নির্ধারণ করে। এটির ডিফল্ট মান "normal"।
unicode-range unicode-range ঐচ্ছিক। ফন্ট কতৃক সাপোর্টেড ইউনিকোড ক্যারেক্টারের সীমা নির্ধারণ করে। এটির ডিফল্ট মান "U+0-10FFFF"।

ফন্ট এর বিভিন্ন ফরম্যাট

TrueType Fonts(TTF)

TrueType হলো ফন্ট স্টান্ডার্ড যা ১৯৮০ সালে এ্যাপল এবং মাইক্রোসফট কর্তৃক ডেভেলপ হয়। ম্যাক অপারেটিং সিস্টেম এবং মাইক্রোসফট উইন্ডোজ অপারেটিং সিস্টেম উভয়ের জন্য ট্রু টাইপ ফন্ট একটি সাধারণ ফন্ট ফরম্যাট।

OpenType Fonts(OTF)

OpenType হলো স্ক্যালেবেল কম্পিউটার ফন্ট। এটি TrueType এর উপর ভিত্তিকরে তৈরি হয়েছিল এবং এটি হলো মাইক্রোসফট এর রেজিস্টার্ড ট্রেডমার্ক। বর্তমানে অধিকাংশ কম্পিউটার প্ল্যাটফর্মেই সচরাচর OpenType ফন্ট ব্যবহৃত হয়।

Web Open Font Format(WOFF)

ওয়েব পেজে ব্যবহারের জন্য WOFF একটি ফন্ট ফরম্যাট। WOFF মূলত সংকোচনশীল এবং অতিরিক্ত মেটাডাটা সম্পন্ন ওপেন টাইপ অথবা ট্রু টাইপ ফন্ট। এটি ২০০৯ সালে ডেভেলপ করা হয়েছে। বর্তমান ওয়েবের জন্য W3C এই ফন্ট ফরম্যাট ব্যবহারের পরামর্শ দেয়।

ওয়েব ওপেন ফন্ট ফরম্যাট(WOFF 2.0)

ট্রু টাইপ অথবা ওপেন টাইপ ফন্ট যা WOFF 1.0 থেকে অধিক সংকোচনশীল।

SVG Font

টেক্সট প্রদর্শিত হওয়ার সময় SVG ফন্ট গ্লিফ(glyphs) হিসেবে SVG ব্যবহার করে। SVG 1.1 এ ফন্ট তৈরি করার জন্য একটি মডিউল নির্ধারণ করা আছে। এছাড়া আপনি SVG ডকুমেন্টেও সিএসএস প্রয়োগ করে SVG টেক্সট এর জন্য @font-face প্রোপার্টি ব্যবহার করতে পারেন।

Embeded Open Type Font(EOT)

এম্বেডেড ওপেন টাইপ ফন্ট ওপেন টাইপ ফন্টের একটি সংক্ষিপ্ত রুপ যা ওয়েব পেজে এম্বেডেড বা সম্প্রসারিত ফন্ট হিসাবে ব্যবহার করা যায় এবং এটি মাইক্রোসফট কর্তৃক ডিজাইন করা হয়েছে।


ফন্ট ফরম্যাট এর জন্য ব্রাউজার সাপোর্ট

ফন্ট ফরমেট Google Chrome Edge/IE Mozila Firefox Safari Opera
TTF/OTF ৪.০ ৯.০ ৩.৫ ৩.১ ১০.০
WOFF ৫.০ ৯.০ ৩.৬ ৫.১ ১১.১
WOFF2 ৩৬.০ সাপোর্ট করে না ৩৫.০* সাপোর্ট করে না ২৬.০
SVG ৪.০ সাপোর্ট করে না সাপোর্ট করে না ৩.২ ৯.০
EOT সাপোর্ট করে না ৬.০ সাপোর্ট করে না সাপোর্ট করে না সাপোর্ট করে না



নিজস্ব ফন্ট এর ব্যবহার

সিএসএস(৩) @font-face নিয়মটি প্রয়োগ করতে হলে প্রথমেই এর মধ্যে ফন্ট এর নাম(যেমন- Serif) নির্ধারণ করতে হবে এবং এরপরে ফন্ট ফাইলটির অবস্থান(URL) নির্দেশ করতে হবে।

এখন আপনি যদি কোনো এইচটিএমএল এলিমেন্টে এই ফন্ট ব্যবহার করতে চান তাহলে সিএসএস font-family প্রোপার্টির মাধ্যমে ফন্টটির নাম নির্দেশ করে দিন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>css3 own light font</title>
<style>
	@font-face {
	   font-family: myOwnFont;
	   src: url(sansation_light.woff);
	}
	div {
	   font-family: myOwnFont;
	}
</style>
</head>
<body>
	<div>This is custom sansation_light font.</div>
	<p><b>বিঃদ্রঃ</b> ইন্টারনেট এক্সপ্লোরার ৮ এবং এর পূর্ববর্তী ভার্সনে @font-face rule সাপোর্ট করে না।</p>
</body>
</html>

ফলাফল


সতর্কতাঃ ফন্ট এর URL সর্বদা ছোট-হাতের অক্ষরে লিখুন। কারণ ইন্টারনেট এক্সপ্লোরার বড়-হাতের ফন্টের লিংক এর জন্য অপ্রত্যাশিত ফলাফল প্রদান করতে পারে।

কাস্টম বোল্ড(Bold) টেক্সট

আপনার ব্যবহৃত টেক্সটকে বোল্ড বা গাঢ় করতে চাইলে @font-face এর মধ্যে আরো একটি প্রোপার্টি font-weight যুক্ত করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
    <title>css3 own bold font</title>
<style>
	@font-face {
	   font-family: myOwnFont;
	   src: url(sansation_bold.woff);
	   font-weight: bold;
	}
	div {
	   font-family: myOwnFont;
	}
</style>
</head>
<body>
	<div>This is custom sansation_bold font.</div>
</body>
</html>

ফলাফল


ব্রাউজার সাপোর্ট

প্রোপার্টি Google Chrome Edge/IE Mozila Firefox Safari Opera
@font-face ৪.০ ৯.০ ৩.৫ ৩.২ ১০.০