এই নিবন্ধটি আপনাকে একটি সাধারণ তবুও একটি গুরুত্বপূর্ণ বিষয়ের সাথে পরিচয় করিয়ে দেবে যা হ'ল ফন্ট ইন এবং আপনাকে এই বিষয়ে একটি বাস্তব প্রদর্শনও দেবে। নিম্নলিখিত পয়েন্টারগুলি এই নিবন্ধে কভার করা হবে,
- সিএসএসে হরফ
- সিএসএস ফন্টে বৈশিষ্ট্য
- হরফ শৈলীর বৈশিষ্ট্য
- ফন্ট-ওজন বৈশিষ্ট্য
- হরফ আকারের বৈশিষ্ট্য
- ফন্ট-পরিবারের বৈশিষ্ট্য
ওয়েবসাইটগুলি চিত্র, অডিও, ভিডিও এবং পাঠ্য সামগ্রী হিসাবে আকারে সামগ্রী বহন করে। তবে, বেশিরভাগ ওয়েব পৃষ্ঠাগুলি এখনও মূল বিন্যাস হিসাবে পাঠ্যের উপর নির্ভর করে। এটি কারণ সাধারণ পাঠ্য কিছু খুব গুরুত্বপূর্ণ সুবিধা দেয়।
অ-অনুপ্রেরণীয় পঠনযোগ্যতা - আপনি অফিসে থাকাকালীন সর্বশেষ ম্যাচের স্কোরটি পরীক্ষা করতে চান। স্পষ্টতই আপনি একটি কোলাহলপূর্ণ ভিডিও নয়, একটি দ্রুত পাঠ্য আপডেট চান!
স্বল্প নেটওয়ার্ক ব্যান্ডউইথের প্রয়োজনীয়তা - দরিদ্র মিডিয়া সংযোগের ক্ষেত্রগুলিতে এমনকি পাঠ্য সামগ্রীগুলি লোড করা যায়, যদিও সমৃদ্ধ মিডিয়া তা পারে না।
বন্ধুত্বপূর্ণ অনুসন্ধান করুন - ওয়েব সাইটগুলি অনুসন্ধানের ইঞ্জিনগুলিতে কীভাবে তাদের সামগ্রী সহজেই লক্ষ্য করা যায় সেদিকে সর্বদা নজর রাখে। কমপক্ষে এআই সম্পূর্ণরূপে ইন্টারনেট গ্রহণ না করা পর্যন্ত পাঠ্য এটির পক্ষে সবচেয়ে উপযুক্ত!
পাঠ্য সামগ্রীকে ফর্ম্যাট করার সময়, ওয়েব ডিজাইনারদের হাতে কাজ করার জন্য কেবল কয়েকটি পরামিতি রয়েছে - ফন্ট, প্রান্তিককরণ, হাইলাইটিং এবং রঙ। আপনার পাঠ্যের জন্য সঠিক ফন্ট নির্বাচন করা একটি সমালোচনামূলক পছন্দ। স্ট্যান্ডার্ড অনুশীলন হ'ল এইচটিএমএল পৃষ্ঠাগুলিতে পাঠ্যের জন্য ফন্টগুলি নির্ধারণ করতে CSS ফন্ট ট্যাগ ব্যবহার করা use
আপনি যদি এইচটিএমএল প্রোগ্রামিং বিশ্বে নতুন হন তবে এখানে একটি প্রাথমিক স্টার্টার ট্যুর পান। আপনি সিএসএস হরফ সম্পর্কে জানার আগে সিএসএস বেসিকগুলি পড়তে চাইতে পারেন।
একটি বিস্তৃত সিএসএস টিউটোরিয়ালের জন্য, প্রাথমিকদের জন্য এডুরেকা সিএসএস টিউটোরিয়ালটি দেখুন। এইচটিএমএল ওয়েব ডিজাইন বৃদ্ধিতে যেভাবে সিএসএস ব্যবহার করতে হবে তা আপনি একটি দুর্দান্ত হেড-আপ পাবেন।
সিএসএসে ফন্টে এই নিবন্ধটি নিয়ে চলছে
সিএসএসে হরফ
একটি হরফ মূলত পাঠ্য প্রদর্শনের সাথে যুক্ত বৈশিষ্ট্যের একটি সেট। হরফ একে অপরের থেকে তাদের আকার, প্রসারণ, প্রস্থ, তীর্য ইত্যাদি দ্বারা পৃথক করা হয়। আসুন বিভিন্ন ফন্টে একটি বেসিক পাঠ্য প্রদর্শন দিয়ে শুরু করা যাক।
উদাহরণ 1: বিভিন্ন ফন্টে শিরোনাম এবং অনুচ্ছেদ
বডি {ব্যাকগ্রাউন্ড-কালার: লাইটব্লিউ} এইচ 1 {ফন্ট: গা bold় 30px এরিয়াল, সানস-সেরিফ} এইচ 2 {ফন্ট: 15 পিক্স রাউজানা} পি {ফন্ট: ইটালিক বোল্ড 12px / 30px জর্জিয়া, সেরিফ}ইটালিক বোল্ড জর্জিয়া ফন্টের অনুচ্ছেদ
উদাহরণ 1: আউটপুট
উদাহরণ 1-এ, আমাদের বিভিন্ন ফন্টে 3 টি ভিন্ন লাইন রয়েছে। আপনি লক্ষ্য করবেন যে প্রতিটি ফন্টের অক্ষর প্রস্থ, ইনডেন্টেশন ইত্যাদির মধ্যে আলাদা হয়
সিএসএসে ফন্টে এই নিবন্ধটি নিয়ে চলছে
জাভাতে স্ক্যানার ক্লাসটি কীভাবে ব্যবহার করবেন
সিএসএস ফন্টে বৈশিষ্ট্য
সিএসএস হরফ 4 টি প্রাথমিক বৈশিষ্ট্য রয়েছে - শৈলী, ওজন, আকার এবং পরিবার। শৈলীর বৈশিষ্ট্যটি সাধারণ বা তির্যক চিহ্নকে বোঝায়। ওজন ফন্টটি সরল বা গা bold় হিসাবে দেখায়। ওজনও সংখ্যাগতভাবে প্রকাশ করা যেতে পারে। আকারটি হ'ল ফন্টের আকার বড় আকারে, উপস্থিত আকারে টেক্সট বৃহত্তর। ফন্টের আকার নির্ধারণ করা যেতে পারে এমন একাধিক উপায় রয়েছে, পরবর্তী বিবরণগুলিতে বিস্তারিত বিবরণ দেওয়া হবে। পরিবারের বৈশিষ্ট্যটি হ'ল পাঠ্যটিতে ফন্টের নাম নির্ধারণ করা।
উদাহরণ 1 এ, আমরা শিরোনাম এবং অনুচ্ছেদের জন্য বিভিন্ন ফন্টের নাম ব্যবহার করেছি। এইচ 1 এবং পি ট্যাগগুলির অধীনে আমরা দুটি ফন্টের তালিকাভুক্ত দেখতে পাচ্ছি, আর এইচ 2 ট্যাগের নাম কেবল একটি ফন্ট রয়েছে। এটি একটি ফন্ট পরিবারের সংজ্ঞা, আরও এটি সম্পর্কে পরে।
সিএসএসে ফন্টে এই নিবন্ধটি নিয়ে চলছে
জাবা-তে একটি সম্পর্ক রয়েছে
হরফ শৈলী বৈশিষ্ট্য:
দুটি প্রাথমিক শৈলী সেট করা যেতে পারে 'সাধারণ' এবং 'তির্যক'। ইটালিকগুলি একটি তির্যক সহ প্রকৃতিতে অভিশাপজনক বলে মনে করা হয়। সাধারন হ'ল ডিফল্ট অপশন যা সোজা। ‘তির্যক’ নামে আরও একটি কম ব্যবহৃত বিকল্প রয়েছে, যা বেশিরভাগ ফন্টে ইটালিক বিকল্পের অনুরূপ। আপনি স্টাইলটিকে 'উত্তরাধিকারী' হিসাবে সেট করতে পারেন যাতে এটি ফন্ট শৈলীর মূল পর্ব উপাদান থেকে নেয়।
| উদাহরণ 2: হরফ শৈলী বিকল্পগুলি | |
| হরফ-পরিবার: রায়দান হরফ শৈলী: স্বাভাবিক হরফ আকার: 15 | ভার্দনা স্বাভাবিক ফন্ট |
| হরফ-পরিবার: রায়দান হরফ শৈলী: ইটালিক হরফ আকার: 15 | ভার্ডানা ইটালিক ফন্ট |
| হরফ-পরিবার: রায়দান হরফ শৈলী: তির্যক হরফ আকার: 15 | ভার্দানা তির্যক ফন্ট |
সিএসএসে ফন্টে এই নিবন্ধটি নিয়ে চলছে
হরফ ওজন বৈশিষ্ট্য:
এই বৈশিষ্ট্যটি ফন্টটি ঘন বা পাতলা হওয়া উচিত কিনা তা স্থির করে। এটি ‘স্বাভাবিক’ বা ‘সাহসী’ এ সেট করা যেতে পারে। ডিফল্ট মান স্বাভাবিক। এই মানটি সংখ্যা হিসাবেও সেট করা যেতে পারে। 400 এর ওজন স্বাভাবিকের প্রতিনিধিত্ব করে এবং 700 সাহসী for কয়েকটি অন্যান্য সেটিংস রয়েছে (100 থেকে খুব হালকা থেকে 900 - খুব সাহসী) তবে এগুলি সমস্ত ফন্ট দ্বারা সমর্থিত নয়। সমস্ত ওজন বিকল্প 3 উদাহরণে প্রদর্শিত হয়।
| উদাহরণ 3: হরফ ওজন বিকল্প | |
| হরফ-পরিবার: রায়দান হরফ ওজন: স্বাভাবিক হরফ আকার: 15 | ভারডান স্বাভাবিক ওজন |
| হরফ-পরিবার: রায়দান হরফ ওজন: সাহসী হরফ আকার: 15 | ভারডানা সাহসী ওজন |
| হরফ-পরিবার: রায়দান হরফ ওজন: 500 হরফ আকার: 15 | ভারডানা সংখ্যার ওজন |
সিএসএসে ফন্টে এই নিবন্ধটি নিয়ে চলছে
হরফ আকারের বৈশিষ্ট্য:
আকারের বৈশিষ্ট্যটি একাধিক উপায়ে সেট করা যেতে পারে। নীচে এই উপায় নীচে তালিকাভুক্ত করা যাক।
Medium গণিত মান যেমন ‘মাঝারি’, ‘বড়’। আসলে পোশাকের আকারের মতোই, মানগুলি XX ছোট থেকে XX বৃহত্তর পর্যন্ত হতে পারে!
Its এর মূল উপাদানটির সাথে তুলনামূলকভাবে 'বৃহত্তর' বা 'আরও ছোট' হিসাবে সেট করুন।
The পিতামাতার উপাদানগুলির আকারের শতাংশ।
The পিতামাতার উপাদানটির আকার সরাসরি গ্রহণ করতে ‘উত্তরাধিকারী’ হিসাবে সেট করুন।
P px (পিক্সেল), pt (পয়েন্ট) বা সেমি (সেন্টিমিটার) এর ইউনিটগুলির পরম মান হিসাবে
‘মিডিয়াম’ এই প্যারামিটারের জন্য ডিফল্ট মান সেট।
সিএসএসে ফন্টে এই নিবন্ধটি নিয়ে চলছে
ফন্ট-পরিবারের বৈশিষ্ট্য:
এইচটিএমএলে, সিএসএস ফন্ট পরিবার হ'ল ফন্টের নাম সেট করার জন্য। আপনি ট্যাগ সহ কেবল একটি ফন্টের নাম রাখতে পারেন put অথবা আপনি একাধিক মান হরফ-পারিবারিক তালিকা হিসাবে নির্ধারণ করতে পারেন যা ব্রাউজারটি ফন্টটি বেছে নিতে হবে সেই অগ্রাধিকারটি সংজ্ঞায়িত করে।
তালিকাটি পতন-ব্যাক সিস্টেমের আকারে বাম থেকে ডানে অগ্রাধিকার দেওয়া হয়েছে। যদি উপলভ্য হয় তবে প্রথম মানটি চয়ন করা হয় বা তালিকার শেষ না হওয়া অবধি নিয়ন্ত্রণ পরবর্তীটিতে চলে যায়। ডিফল্ট ফন্ট পরিবার ব্রাউজার পছন্দগুলি দ্বারা সংজ্ঞায়িত করা হয়।
সিএসএস ফন্ট পরিবারগুলি 2 প্রকারের - জেনেরিক পরিবার এবং ফন্ট পরিবার।
Er জেনেরিক পরিবারগুলি - কিছু সাধারণ বৈশিষ্ট্যের উপর ভিত্তি করে, ফন্টগুলি ‘সেরিফ’, ‘সানস সেরিফ’, ‘মনোস্পেস’ ইত্যাদি হিসাবে শ্রেণিবদ্ধ করা হয় উদাহরণস্বরূপ, সানস সেরিফ বলতে সেরিফ শৈলী ব্যতীত ফন্টগুলি বোঝায়।
● পরিবারের নাম - নির্দিষ্ট পারিবারিক শ্রেণিবিন্যাস সম্পর্কিত ফন্টগুলি। টাইমস, আরিয়াল, কুরিয়ার সব ফন্ট পরিবার এবং টাইমস নিউ রোমান টাইমস পরিবারের উদাহরণ ফন্ট।
বিভিন্ন হরফ পরিবারের ব্যবহারের বিকল্পগুলি নীচে উদাহরণ 4 এ তালিকাভুক্ত করা হয়েছে।
তথ্য বিজ্ঞান কি?
| উদাহরণ 4: ফন্ট পরিবারের বিকল্পগুলি | |
| হরফ-পরিবার: রায়দান | ভারদানা একক ফন্ট |
| হরফ-পরিবার: 'টাইমস নিউ রোমান', টাইমস, কুরিয়ার | টাইমস নিউ রোমানের পরে ফন্ট পরিবার রয়েছে |
| হরফ-পরিবার: আরিয়াল, মিনিভান, সানস-সেরিফ | জেনেরিক পরিবারগুলির পরে অ্যারিয়াল |
কিছু সাধারণ বিষয় লক্ষ্য করুন
CSS বেশ কয়েকটি অন্যান্য সিএসএস বৈশিষ্ট্যের মতো কিছু ফন্ট সেটিংস বিভিন্ন ব্রাউজারে পরিবর্তিত হয়। কিছু বিরল ফন্ট সেটিংস ব্যবহার করার আগে ব্রাউজার সমর্থন পরীক্ষা করুন।
Font আপনি ফন্ট-স্টাইল, ফন্ট-ওজন ইত্যাদির স্বতন্ত্র ট্যাগ ব্যবহার করে ফন্ট সেটিংস আলাদাভাবে সেট করতে পারেন বিকল্প হিসাবে আপনি যদি কমপ্যাক্ট কোডটি পছন্দ করেন তবে আপনি একই লাইনে সমস্ত মান সহ শর্টহ্যান্ড ফন্ট বৈশিষ্ট্যটি ব্যবহার করতে পারেন।
User ব্যবহারকারীর পরিস্থিতিতে যেখানে আপনি ব্রাউজারের আকারের উপর নির্ভর করে ফন্টের আকারের পরিবর্তিত হতে চান সেখানে একটি কার্যকর ফন্ট সাইজ সেটিং যা প্রতিক্রিয়াশীল ফন্ট সেটিং বলে। এটি একটি ভিডব্লিউ ইউনিট দিয়ে সেট করা যেতে পারে যার অর্থ 'ভিউপোর্টের প্রস্থ'। এইভাবে পাঠ্যের আকারটি ব্রাউজার উইন্ডোর আকার অনুসরণ করবে।
আশা করি CSS এর ফন্টগুলিতে আপনি যে তথ্যটি সন্ধান করছেন তা পেয়ে গেছেন। নীচে মন্তব্য বিভাগে আমাদের সাথে আপনার অভিজ্ঞতা ভাগ করুন। হ্যাপি ডিজাইনিং!
আপনি যদি ওয়েব-বিকাশ সম্পর্কে আরও শিখতে আগ্রহী হন তবে এটি দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভেলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে শিখতে এবং এটি অ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে।