এইচটিএমএল এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে সিএসএস ফন্ট গুরত্বপূর্ন। এজন্য বেশ কিছু সিএসএস প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত।নিচের সেগুলির উদাহরন সহ আলোচনা করা হল
ফন্ট পরিবার (Font Family)
font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়। একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। এক্ষেত্রে ব্রাউজার আগে প্রথমটি খুজবে যদি সিস্টেমে না পায় (অর্থ্যাৎ আপনার পিসিতে ফন্টটি ইনস্টল না থাকে) তখন পরেরটি দেখবে এভাবে..। যদি একটি না পায় তখন প্রথম ফন্টটি যে পরিবারের সদস্য সেই পরিবারের একটা ফন্ট প্রয়োগ করবে।
font-family: Verdana, SolaimanLipi;
font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সট এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমন
font-size:18px;
/* or */
font-size: 2em;
** কত em এ কত পিক্সেল এগুলি গুগলে সার্চ দিলে হাজারটা সমাধান পাবেন।
font-weight দিয়ে ফন্টটি দেখতে কত গাঢ় হবে সেটা ঠিক করা যায়। এর মান হতে পারে "normal", "bold", "bolder", "lighter", "inherit" এবং 100, 200, 300 ...900 পর্যন্ত। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়। মানগুলি দেখেই বোঝা যায় কোনটা দিলে টেক্সট দেখতে কেমন হবে অথবা আমাদের অনলাইন এডিটরে মানগুলি চালিয়ে দেখতে পারেন।
font-weight: bold;
font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়।
font-style:italic;
font-style : oblique;
font-style : normal;
font-style: inherit;
font-variant দিয়ে small-caps নামের ইফেক্ট টি টেক্সট এ দেয়া যায় ফলে প্রথম অক্ষরটি একটু বড় করে দেখা এছাড়া normal এবং inherit মানও দেয়া যায়। normal দিলে যেমন লেখা আছে তেমনি দেখাবে আর inherit দিলে প্যারেন্ট এলিমেন্টের টা নিবে।
font-variant: small-caps;
সব প্রোপার্টিগুলির একসাথে উদাহরন
** যদি এমন ফন্ট ব্যবহার করেন যেটার নামে স্পেস আছে তাহলে সেটা কোটেশন এর ভিতর রাখতে হবে যেমন
font-family : "Times New Roman";
যদি এমন ফন্ট ব্যবহার করতে চান যেটা সিস্টেম ফন্ট নয় অর্থ্যাৎ সাধারনত ইউজারের পিসিতে ইনস্টল থাকেনা
======================================
এই সমস্যার জন্য সিএসএস ৩ এ font-face নামে একটা নতুন প্রোপার্টি এসেছে। এটা দিয়ে যেকোন ফন্টেই আপনার টেক্সট দেখাতে পারেন। সাধারনত সাইটের স্লোগান, নাম, টাইটেল ইত্যাদিতে এমন ফন্ট ব্যবহার করতে হয় যেগুলি ইউজারের পিসিতে থাকেনা। আগে কুফন নামে একটা স্ক্রিপ্ট ব্যবহার করে এসব করা হত তবে এটা গুনগত মান পর্যাপ্ত নয় এছাড়া ছবিও ব্যবহার করা হত যেটাও সঠিক সমাধান ছিলনা।
প্রথমে আপনাকে ফন্ট টি যোগাড় করতে হবে যেটা দিতে চান। এরপর ফন্টটির দুটি ভার্সন বানিয়ে নিতে হবে। embedded open type(.eot) এবং true type font (.ttf)
অনলাইনে প্রচুর সাইট আছে যেখানে এক ভার্সন থেকে অন্য ভার্সনে বিনামুল্যে বদলে দেয়। এটা করতে হবে কেননা IE (ইন্টারনেট এক্সপ্লোরার) এ শুধু eot সাপোর্ট করে আর বাকিসব গুলিতে ttf চলে।
** সাবার প্রথমেই font-face ব্যবহার করা প্রয়োজন। অর্থ্যাৎ স্টাইলশিটের প্রথমেই এটা দিয়ে পরে অন্যান্য কোড।
@font-face {
font-family: 'blok-italic'
src: url('/media/fonts/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('/media/fonts/Blokletters-Balpen.ttf') format('truetype');
}
h1{
font-family:blok-italic;
}
প্রয়োগ দেখুন
** এখানে অন্যান্য রুল লেখার চেয়ে একটু ভিন্ন হল প্রথমে @ চিহ্নটি দিতে হয়।
** eot ফরমেটের টি আগে ব্যবহার করতে হবে নাহলে IE তে কাজ হবেনা।
