ডিজাইন
ওয়েবের যত ফন্টস (Web Fonts)
আমরা যারা ওয়েব ডিজাইন নিয়ে কাজ করি তারা সবাই কম বেশি ওয়েব ফন্ট সম্মন্ধে জানি। এবং এটাও জানি যে, ওয়েব ডিজাইনের জন্য ফন্ট কতটা গুরুত্বপূর্ণ। ফন্ট অনেক রকম হয়ে থাকে। কিছু ফন্ট আছে যে গুলি সিএসএস সরাসরি সাপোর্ট করে। শুধু ফন্ট ফ্যামিলি উল্লেখ করলে সেই ফন্টটি ওয়েব পেজে প্রদর্শিত হবে। কিছু ফন্ট আছে যেগুলি আমরা আমাদের সার্ভারে ডাউনলোড করে লিংক সংযোগের মাধ্যমে ব্যবহার করতে পারি। আর কিছু ফন্ট এমন আছে যেগুলি আমরা আমাদের ওয়েবসাইটে ব্যবহার করতে হলে তাদের দেওয়া নির্ধারিত URL আমাদের ডকুমেন্টে সংযোগ করতে হবে। এ কারণে নেট সংযোগ থাকাটা আবশ্যক।
ফন্টের জন্য বর্তমান সময়ে সবচেয়ে জনপ্রিয় ওয়েবসাইট হচ্ছে Google Fonts. কারণ এখানে বিভিন্ন ডিজাইনে হাজার হাজার ইংরেজী ফন্ট রয়েছে। এই সাইটে বেশ কিছু ফন্ট আছে যেগুলি ১০০% ফ্রী। এবং কিছু ফন্ট এমন আছে যা ক্রয় করতে হয়। আমাদের বাংলা ভাষায় বাংলা ফন্টের জন্য কিছু ওয়েবসাইট আছে, যেখান থেকে একসাথে অনেক গুলো ফন্ট ডাউনলোড করে ব্যবহার করতে পারবেন। অথবা, তাদের দেওয়া লিংক সংযোগের মাধ্যমে ব্যবহার করা যাবে। তবে, সব কিছুর ভিন্ন ভিন্ন নিয়ম রয়েছে। এই টিউটোরিয়াল এবং পরবর্তী কয়েকটি টিউটোরিয়ালে আমি বিভিন্ন ওয়েব ফন্ট ব্যবহারের নিয়ম গুলো উদাহরণ সহ দেখাবার চেষ্টা করব ইনশা আল্লাহ। ফন্ট এমন একটি বিষয় যা আর্টিকেল লিখে হয়তো পুর্ণাঙ্গ বুঝানো সম্ভব হবে না। তাই অনুরুধ থাকল ভিডিও টিউটোরিয়াল গুলি দেখবেন। কারণ সেখানে সব কিছু বিস্তারিত ভাবে বলা হয়েছে এবং করে দেখানো হয়েছে। এইসব টিউটোরিয়াল গুলোতে যা যা থাকছে।
CSS Fonts আমার প্রিয় এবং সেরা ১০টি সিএসএস ফন্ট ফ্যামিলি উদাহরণ সহ দেখতে এই টিউটোরিয়ালটি দেখুন।
Google Fonts আমার প্রিয় এবং সেরা ১০টি গোগল ফন্ট উদাহরণ সহ দেখতে এই টিউটোরিয়ালটি দেখুন।
Bangla Fonts আমার প্রিয় এবং সেরা ১০টি বাংলা ফন্ট উদাহরণ সহ দেখতে এই টিউটোরিয়ালটি দেখুন।
এছাড়াও ফন্ট ব্যবহার করার জন্য কিভাবে লিংক করবেন, এবং কোন্ ফন্ট কোথা থেকে ডাউনলোড করবেন, এইসব টিউটোরিয়াল গুলোতে সব কিছু বিস্তারিত ভাবে দেখানো হয়েছে। আরো জানতে ভিডিও টিউটোরিয়ালটি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Fonts</title>
<link href="https://fonts.googleapis.com/css?family=Economica|Josefin+Slab" rel="stylesheet">
<link href="https://fonts.maateen.me/mukti/font.css" rel="stylesheet">
<style>
h1{
font-family: 'Josefin Slab', serif;
}
h2{
font-family: 'mukti', sans-serif;
}
h3{
font-family: "Times New Roman", Times, serif;
}
h4{
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The quick brown fox jumps over the lazy dog.</h1>
<h2>আমার সোনার বাংলা আমি তোমায় ভালবাসি।</h2>
<h3>The quick brown fox jumps over the lazy dog.</h3>
<h4>The quick brown fox jumps over the lazy dog.</h4>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন