Foundation ফ্রেমওয়ার্কে Typography কাস্টমাইজেশন এবং Custom Fonts ব্যবহার করা সহজ। Foundation ফ্রেমওয়ার্কে Sass এর মাধ্যমে আপনি বিভিন্ন ফন্ট এবং টাইপোগ্রাফি সেটিংস কাস্টমাইজ করতে পারেন। এখানে ফন্ট, ফন্ট সাইজ, লাইন হাইট এবং অন্যান্য টাইপোগ্রাফি সম্পর্কিত সেটিংস কাস্টমাইজ করা যায়, যা আপনার ওয়েবসাইটের ডিজাইনের সাথে সামঞ্জস্যপূর্ণ হয়।
Custom Fonts কাস্টমাইজেশন
Foundation এ custom fonts ব্যবহার করতে হলে কিছু কনফিগারেশন করতে হবে। আপনি Google Fonts বা অন্য কোনো ফন্ট সার্ভিস ব্যবহার করতে পারেন, অথবা আপনার নিজের ফন্ট ফাইলও ব্যবহার করতে পারেন। নিচে কিছু ধাপ দেওয়া হলো যেগুলো অনুসরণ করে আপনি Foundation-এ কাস্টম ফন্ট যোগ করতে পারবেন।
১. Google Fonts থেকে ফন্ট ইমপোর্ট করা
আপনি যদি Google Fonts ব্যবহার করতে চান, তবে প্রথমে Google Fonts থেকে একটি ফন্ট নির্বাচন করুন। উদাহরণস্বরূপ, আমরা Roboto ফন্টটি ব্যবহার করতে পারি।
- Google Fonts ওয়েবসাইটে গিয়ে Roboto ফন্টটি নির্বাচন করুন।
সেখান থেকে Embed অপশনে ক্লিক করে ফন্ট লিঙ্ক কপি করুন:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">আপনার HTML ফাইলে এই লিঙ্কটি
<head>ট্যাগের মধ্যে যুক্ত করুন:<head> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head>
২. Sass ফাইলের মাধ্যমে ফন্ট কাস্টমাইজেশন
Foundation-এ Sass ব্যবহার করে আপনি আপনার প্রোজেক্টে ফন্ট কাস্টমাইজ করতে পারেন। প্রথমে _settings.scss ফাইলে ফন্ট সেটিংস পরিবর্তন করুন:
_settings.scssফাইল কাস্টমাইজ করুন:Foundation-এর ডিফল্ট
_settings.scssফাইলে ফন্ট সংক্রান্ত কিছু ভ্যারিয়েবল রয়েছে। আপনি এই ভ্যারিয়েবলগুলিকে আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন:$font-family-base: 'Roboto', sans-serif;ফন্ট সাইজ এবং লাইন হাইট কাস্টমাইজ করুন:
টাইপোগ্রাফি কাস্টমাইজ করতে আপনি ফন্ট সাইজ এবং লাইন হাইট নির্ধারণ করতে পারেন:
$font-size-base: 16px; // বেস ফন্ট সাইজ $line-height-base: 1.5; // লাইন হাইট
৩. Custom Font ব্যবহার করার উদাহরণ
আপনি যদি একটি কাস্টম ফন্ট ফাইল (যেমন TTF বা OTF ফন্ট ফাইল) ব্যবহার করতে চান, তবে প্রথমে ফন্ট ফাইলটি আপনার প্রোজেক্টে আপলোড করতে হবে এবং তারপর CSS বা Sass-এর মাধ্যমে সেটি ইমপোর্ট করতে হবে।
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/my-custom-font.woff2') format('woff2'),
url('fonts/my-custom-font.woff') format('woff');
}
$font-family-base: 'MyCustomFont', sans-serif;
এখানে:
@font-face: কাস্টম ফন্ট ব্যবহারের জন্য CSS বা Sass কনফিগারেশন।$font-family-base: ডিফল্ট ফন্টের পরিবর্তে আপনার কাস্টম ফন্ট ব্যবহার করার জন্য।
Typography কাস্টমাইজেশন
Foundation ফ্রেমওয়ার্কে Typography কাস্টমাইজেশন খুবই সহজ। আপনি font-family, font-size, line-height, letter-spacing এবং text-transform ইত্যাদি পরিবর্তন করতে পারেন।
১. বেস টাইপোগ্রাফি কাস্টমাইজেশন
Foundation-এর বেস টাইপোগ্রাফির জন্য _settings.scss ফাইলে কিছু ভ্যারিয়েবল দেওয়া থাকে। এই ভ্যারিয়েবলগুলো পরিবর্তন করে আপনি সমস্ত প্রোজেক্টে টাইপোগ্রাফি কাস্টমাইজ করতে পারবেন।
$font-family-base: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size-base: 1rem; // 16px
$line-height-base: 1.5;
$letter-spacing-base: 0.5px;
$text-transform: none;
২. সিরিজ ফন্ট সাইজ (Font Size Scale)
Foundation এ একটি font-size scale ব্যবহার করা হয়, যা সমস্ত ভ্যারিয়েবল এবং সিএসএস ক্লাসের মধ্যে সামঞ্জস্য বজায় রাখে। এই ফন্ট সাইজ স্কেলটি টাইপোগ্রাফি কাস্টমাইজ করতে সাহায্য করে।
$font-size-small: 0.875rem;
$font-size-medium: 1rem;
$font-size-large: 1.25rem;
$font-size-xlarge: 1.5rem;
৩. টেক্সট অ্যালাইনমেন্ট (Text Alignment)
Foundation এ বিভিন্ন text-align স্টাইলও কাস্টমাইজ করা যেতে পারে:
$text-align-left: left;
$text-align-center: center;
$text-align-right: right;
৪. টেক্সট ট্রান্সফর্ম (Text Transform)
Foundation আপনাকে সহজে text-transform পরিবর্তন করতে দেয়, যেমন:
- uppercase
- lowercase
- capitalize
$text-transform: uppercase;
Foundation ফ্রেমওয়ার্কে Custom Fonts এবং Typography কাস্টমাইজেশন খুবই সহজ। আপনি Sass ফাইল ব্যবহার করে ফন্ট ফ্যামিলি, ফন্ট সাইজ, লাইন হাইট, লেটার স্পেসিং, এবং অন্যান্য টাইপোগ্রাফি সেটিংস কাস্টমাইজ করতে পারেন। Google Fonts বা কাস্টম ফন্ট ফাইল ব্যবহার করে আপনার ওয়েবসাইটের টাইপোগ্রাফি ডিজাইন আরও উন্নত করতে পারবেন, যা ওয়েবসাইটের ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়ক।
Read more
