HTML ফন্ট এর কিছু tips

Related Articles

মঙ্গলে জনবসতি গড়ে তোলা বুদ্ধিমানের কাজ নয়

May 31, 2018

ফসিলাইজড খুশকির মাধ্যমে বিবর্তিত বর্তমান প্রাণীর অবস্থান

May 26, 2018

ডার্ক ম্যাটার ও আমাদের সম্প্রসারণশীল বিশ্ব

May 16, 2018

(CSS Font)

এইচটিএমএল এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে সিএসএস ফন্ট গুরত্বপূর্ন। এজন্য বেশ কিছু সিএসএস প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত।নিচের সেগুলির উদাহরন সহ আলোচনা করা হল

(Font Family)

font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়। একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। এক্ষেত্রে ব্রাউজার আগে প্রথমটি খুজবে যদি সিস্টেমে না পায় (অর্থ্যাৎ আপনার পিসিতে ফন্টটি ইনস্টল না থাকে) তখন পরেরটি দেখবে এভাবে..। যদি একটি না পায় তখন প্রথম ফন্টটি যে পরিবারের সদস্য সেই পরিবারের একটা ফন্ট প্রয়োগ করবে।

. font-family: Verdana, SolaimanLipi;

font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সট এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমন

1.font-size:18px;

2./* or */

3.font-size: 2em;

 

font-weight  দিয়ে ফন্টটি দেখতে কত গাঢ় হবে সেটা ঠিক করা যায়। এর মান হতে পারে “normal”, “bold”, “bolder”, “lighter”, “inherit” এবং 100, 200, 300 …900 পর্যন্ত। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়। মানগুলি দেখেই বোঝা যায় কোনটা দিলে টেক্সট দেখতে কেমন হবে অথবা আমাদের অনলাইন এডিটরে মানগুলি চালিয়ে দেখতে পারেন।

1.font-weight: bold;

 

যদি এমন ফন্ট ব্যবহার করতে চান যেটা সিস্টেম ফন্ট নয় অর্থ্যাৎ সাধারনত ইউজারের পিসিতে ইনস্টল থাকেনা

এই সমস্যার জন্য সিএসএস ৩ এ font-face নামে একটা নতুন প্রোপার্টি এসেছে। এটা দিয়ে যেকোন ফন্টেই আপনার টেক্সট দেখাতে পারেন। সাধারনত সাইটের স্লোগান, নাম, টাইটেল ইত্যাদিতে এমন ফন্ট ব্যবহার করতে হয় যেগুলি ইউজারের পিসিতে থাকেনা।

প্রথমে আপনাকে ফন্ট টি যোগাড় করতে হবে যেটা দিতে চান। এরপর ফন্টটির দুটি ভার্সন বানিয়ে নিতে হবে। embedded open type(.eot) এবং true type font (.ttf)

অনলাইনে প্রচুর সাইট আছে যেখানে এক ভার্সন থেকে অন্য ভার্সনে বিনামুল্যে বদলে দেয়। এটা করতে হবে কেননা IE (ইন্টারনেট এক্সপ্লোরার) এ শুধু eot সাপোর্ট করে আর বাকিসব গুলিতে ttf চলে।

 

** সাবার প্রথমেই font-face ব্যবহার করা প্রয়োজন। অর্থ্যাৎ স্টাইলশিটের প্রথমেই এটা দিয়ে পরে অন্যান্য কোড।

01.@font-face {

.font-family: ‘blok-italic’;

.src: url(‘/media/fonts/Blokletters-Balpen.eot’);}

04.h1{

font-family:blok-italic;

}

 

টেক্সট রূপান্তর

text-transform ছোট অক্ষরে বা বড় অক্ষরে লেখাগুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়। তিন প্রকার text-transform রয়েছে।

Uppercase – সকল লেখাকে বড় হাতের অক্ষরে পরিনত করবে।
Lowercase – সকল লেখাকে ছোট হাতের অক্ষরে পরিনত করবে।
Capitalize – লেখার সকল শব্দের প্রথব বর্ণ বড় হাতের হবে।

উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুন।

 

p.uppercase {

text-transform: uppercase;

}

p.lowercase {

text-transform: lowercase;

}

p.capitalize {

text-transform: capitalize;

}

 

          লেখার রঙ

লেখার রঙ দেওয়ার জন্য টেক্সট রঙ ব্যবহৃত হয়।

সিএসএস এর সঙ্গে, কিছু রঙ প্রায়শই উল্লেখ করা হয়:

• একটি HEX মান: “# ff0000”
• একটি RGB মান : “RGB (255,0,0)”
• একটি রঙ নাম –  যেমন-“লাল”

h1 {

color: #00ff00;

}

 

h2 {

color: rgb(255,0,0);

}