সিস্টেম ফন্ট, সংযোগ. স্ট্যান্ডার্ড ফন্টের স্ট্যাক স্ট্যান্ডার্ড উইন্ডোজ 7 ফন্টের তালিকা

ডিফল্টরূপে কোনো ব্রাউজার তৃতীয় পক্ষের সম্পদ থেকে ফন্ট ডাউনলোড বা ইনস্টল করে না। এই কারণেই প্রায়ই "অ-মানক" ফন্টগুলির সমস্যা দেখা দেয়। ধরা যাক একজন ওয়েবমাস্টার সাইটে কিছু সুন্দর ফন্ট তৈরি করার সিদ্ধান্ত নিয়েছে, কোডে এটি নির্দিষ্ট করেছে, কিন্তু বেশিরভাগ সাইট ব্যবহারকারীদের অপারেটিং সিস্টেমে এই ফন্টটি ইনস্টল করা নেই।

ব্রাউজার, অবশ্যই, এই ফন্টটি ইনস্টল করাগুলির মধ্যে একটি দিয়ে প্রতিস্থাপন করার চেষ্টা করবে, তবে সাইটটি মোটেই প্রদর্শিত হবে না যেমনটি এটির উদ্দেশ্য ছিল। অবশ্যই, এমন প্রযুক্তি রয়েছে যা আপনাকে এই সীমাবদ্ধতাকে বাইপাস করার অনুমতি দেয়, তবে চরম ক্ষেত্রে এটি করা ভাল, যখন আপনি তৃতীয় পক্ষের ফন্ট ছাড়া করতে পারবেন না।

সুতরাং, ফন্টের এই "স্ট্যান্ডার্ড সেট" কি? নীচে আগে থেকে ইনস্টল করা অপারেটিং সিস্টেম ফন্টগুলির একটি তালিকা রয়েছে (ওয়েবসাইটগুলিতে ব্যবহারের জন্য প্রস্তাবিত ফন্টগুলি হাইলাইট করা হয়েছে):

কি স্ট্যান্ডার্ড ফন্ট মত চেহারা.

Windows Vista, Firefox 2.0, ClearType সক্ষম (সম্পূর্ণ আকার দেখতে ছবিতে ক্লিক করুন)

Mac OS X 10.4.8, Firefox 2.0, ClearType সক্ষম (সম্পূর্ণ আকার দেখতে ছবিতে ক্লিক করুন)

Windows 2000, IE 6.0 (সম্পূর্ণ আকার দেখতে ছবিতে ক্লিক করুন)

পছন্দ স্ট্যান্ডার্ড ফন্ট, একটি নির্দিষ্ট অপারেটিং সিস্টেম দ্বারা ব্যবহৃত, কর্মক্ষমতা উন্নত করতে পারে। এটি যে কোনো ক্ষেত্রে প্রযোজ্য ইন্টারনেটের জন্য নিরাপদ» ফন্ট। "সিস্টেম" ফন্টগুলির সুবিধা হল যে তারা অপারেটিং সিস্টেম ইতিমধ্যে ব্যবহার করে এমন ফন্টগুলির সাথে মেলে, তাই ব্যবহারকারী পাঠ্যটি পড়তে স্বাচ্ছন্দ্য বোধ করবে।

সিস্টেম ফন্টের শ্রেণীবিভাগ:

কোডে এগিয়ে যাওয়া যাক

ভূমিকা দেখায় যে অপারেটিং সিস্টেমের নতুন সংস্করণের আবির্ভাবের সাথে নতুন ফন্ট আসে এবং তাদের সাথে আপডেট করার প্রয়োজন হয় সাইটের জন্য আদর্শ ফন্ট.

পদ্ধতি 1: উপাদান স্তরে সিস্টেম ফন্ট

ক্রোম এবং সাফারি সম্প্রতি চালু করেছে " সিস্টেম-ইউআই" একটি সর্বজনীন ফন্ট পরিবার যা " এর পরিবর্তে ব্যবহার করা যেতে পারে - আপেল-সিস্টেম" এবং " BlinkMacSystemFont" সিস্টেম ফন্ট ব্যবহার করার একটি পদ্ধতি হল ফন্ট-ফ্যামিলি প্রপার্টি ব্যবহার করে একটি উপাদানে সরাসরি কল করা।

গিটহাব তাদের সাইটে এই পদ্ধতি ব্যবহার করে বডিতে সিস্টেম ফন্ট ব্যবহার করে:

/* সিস্টেম ফন্টগুলি GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI ইমোজি", ব্যবহার করে "Segoe UI প্রতীক";)

মিডিয়াম এবং ওয়ার্ডপ্রেস অ্যাডমিন উভয়ই একই পদ্ধতি ব্যবহার করে। সর্বাধিক সমর্থিত হল অক্সিজেন সানস ( GNU+Linux অপারেটিং সিস্টেমের জন্য তৈরি করা হয়েছে) এবং Cantarell (GNOME অপারেটিং সিস্টেমের জন্য তৈরি)।

এই উদাহরণটি কিছু ধরণের ইমোটিকন এবং প্রতীকগুলির জন্য সমর্থনও দেখায়:

/* মিডিয়াম এবং ওয়ার্ডপ্রেস */ বডি দ্বারা ব্যবহৃত সিস্টেম ফন্ট (ফন্ট-ফ্যামিলি: -অ্যাপল-সিস্টেম, ব্লিঙ্কম্যাকসিস্টেমফন্ট,"সেগো ইউআই", রোবোটো,অক্সিজেন-সানস,উবুন্টু,ক্যান্টারেল,"হেলভেটিকা ​​নিউ",সান-সেরিফ;)

দ্রষ্টব্য: এই পদ্ধতি শুধুমাত্র ফন্ট পরিবারের জন্য ব্যবহার করা যেতে পারে CSS স্ট্যান্ডার্ড ফন্টছোট ফন্টের পরিবর্তে।

পদ্ধতি 2: সিস্টেম ফন্ট স্ট্যাক

প্রথম পদ্ধতির সীমাবদ্ধতা হল যে প্রতিবার এটি একটি উপাদানে প্রয়োগ করার সময় এটিকে পূর্ণ ফন্ট স্ট্যাক কল করতে হবে। এবং এটি কোথায় এবং কিভাবে ব্যবহার করা হয় তার উপর নির্ভর করে কোডটি ফুঁকতে পারে।

একটি বিকল্প পদ্ধতি যেখানে @font-face বৈশিষ্ট্য ব্যবহার করে সিস্টেম ফন্ট ঘোষণা করা হয়। এর সুবিধা হল যে আপনি একবার ফন্ট ঘোষণা করতে পারেন এবং তারপরে প্রতিবার ফন্টের একটি দীর্ঘ তালিকার পরিবর্তে ফন্ট-পরিবারের বৈশিষ্ট্যের সাথে প্রয়োগ করতে পারেন।

রুনেটের একটি নির্দিষ্ট বৈশিষ্ট্য হল পৃষ্ঠা এনকোডিং এবং ফন্টে সিরিলিক সমর্থনের সমস্যা। বিভিন্ন অক্ষর এনকোডিংয়ের সমস্যা এড়াতে, স্মার্ট লোকেরা একটি ফন্ট নিয়ে এসেছিল যা আপনাকে একটি ফন্টে বিভিন্ন ভাষার অক্ষরগুলিকে একত্রিত করতে দেয়। সুতরাং, রাশিয়ান ভাষার পৃষ্ঠাগুলির জন্য আপনাকে শুধুমাত্র ইউনিকোড ফন্ট ব্যবহার করতে হবে যা সিরিলিক সমর্থন করে।

নীচে হরফ চিঠিপত্রের একটি টেবিল আছে.

* ফন্টের বিপরীত কলামে মানে হল যে অপারেটিং সিস্টেমে উইন্ডোজ ফন্টের নেটিভ সিরিলিক সমতুল্য নেই। কিন্তু একই সময়ে, এই ফন্টটি নিজেই অপারেটিং সিস্টেমে সরাসরি ইনস্টল হওয়ার একটি উচ্চ সম্ভাবনা রয়েছে।

উদাহরণস্বরূপ, যদি লেআউটের মূল পাঠ্যটি Arial হয়, আমরা টেবিলে এই ফন্টটি খুঁজে পাই এবং CSS-এ সংশ্লিষ্ট লাইনটি লিখি:

বডি (ফন্ট-ফ্যামিলি: এরিয়াল, "হেলভেটিকা ​​সিওয়াই", "নিম্বাস সানস এল", সান-সেরিফ; )

এই এন্ট্রির মানে হল যে যদি ব্যবহারকারীর এরিয়াল ফন্ট থাকে (এবং সমস্ত উইন্ডোজ ব্যবহারকারী এবং সমস্ত Mac OS X ব্যবহারকারীদের কাছে এটি থাকে), তাহলে পৃষ্ঠাটি এই ফন্টে প্রদর্শিত হবে। যদি ব্যবহারকারীর কাছে এই ফন্টটি না থাকে, তাহলে রাশিয়ান-ভাষী ম্যাক ওএস 9 ব্যবহারকারীর পৃষ্ঠাটি সঠিকভাবে স্ট্যান্ডার্ড সিস্টেম ফন্ট হেলভেটিকা ​​সিওয়াইতে প্রদর্শিত হবে এবং ইউনিক্স/লিনাক্স ব্যবহারকারীর জন্য এটি নিম্বাস সানস এল ফন্টে প্রদর্শিত হবে। , যা ইউনিক্স/লিনাক্স ব্যবহারকারীদের 90%-এ ইনস্টল করা আছে। যদি ইউনিক্স/লিনাক্স ব্যবহারকারী 10% এর মধ্যে থাকে যার কাছে এই ফন্টটি নেই, তাহলে পৃষ্ঠাটি সেরিফ ফন্টে প্রদর্শিত হবে যা ওয়েব পৃষ্ঠাগুলি দেখার জন্য ডিফল্টরূপে সেট করা হয়।

এই ধরনের শাসকদের উদাহরণ দেখা যায়, উদাহরণস্বরূপ, ড্রিমওয়েভারে।

প্রারম্ভিক লেআউট ডিজাইনাররা এই দীর্ঘ লাইনের অর্থ কী তা না ভেবেই প্রথম ফন্টের উপর ভিত্তি করে একটি শাসক চয়ন করেন। কেউ কেউ এমনকি প্রথম ফন্টটি ব্যতীত সমস্ত কিছু মুছে ফেলে, সমস্ত ব্যবহারকারীকে বঞ্চিত করে যারা, কোন কারণে, এই ফন্টটি ইনস্টল করা নেই, ডিজাইনারের অভিপ্রায় দেখা থেকে।

কিন্তু এখন আমরা জানি এই লাইনের মানে কি, তাই না? এবং আমরা ইতিমধ্যে সঠিকভাবে এটি ব্যবহার করতে পারেন.

তবে কেন আমরা যে লাইনটি তৈরি করেছি তা ড্রিমওয়েভারের সাধারণের থেকে এত আলাদা:

বডি (ফন্ট-ফ্যামিলি: এরিয়াল, হেলভেটিকা, সান-সেরিফ;)

টেবিলটি ইউনিক্স/লিনাক্স ফন্টগুলিকে বিবেচনা করে তা ছাড়াও, সাধারণ হেলভেটিকার পরে কিছু অদ্ভুত CY আইকনও রয়েছে। চলুন চিন্তা করা যাক এটা কি!

ম্যাক ওএস এক্স প্রকাশের আগে, এই লাইনটির নিম্নলিখিত অর্থ ছিল: উইন্ডোজ ব্যবহারকারীদের জন্য, আমরা পৃষ্ঠাটি অ্যারিয়ালে প্রদর্শন করি, ম্যাক ওএস 9 ব্যবহারকারীদের জন্য, স্ট্যান্ডার্ড হেলভেটিকা ​​ফন্টে এবং বাকিদের জন্য, আমরা সিস্টেমে পৃষ্ঠাটি দেখতে পাই sans-serif ফন্ট, যা ব্রাউজারে ডিফল্টরূপে কনফিগার করা হয়। কিন্তু আবার, একটি গুরুত্বপূর্ণ nuance! স্ট্যান্ডার্ড ম্যাক ওএস 9 হেলভেটিকা ​​ফন্টে সিরিলিক নেই! রাশিয়ান-ভাষা পৃষ্ঠার জন্য, এর অর্থ নিম্নোক্ত: উইন্ডোজ ব্যবহারকারীদের জন্য আমরা এরিয়াল পৃষ্ঠাটি প্রদর্শন করি, ম্যাক ওএস 9 ব্যবহারকারীদের জন্য - স্ট্যান্ডার্ড হেলভেটিকা ​​ফন্টে, যা অপঠিত তথ্য প্রদর্শন করে এবং বাকিরা সিস্টেম সান-সেরিফ সহ পৃষ্ঠাটি দেখে ব্রাউজারে ডিফল্টরূপে ফন্ট কনফিগার করা হয়।

Mac OS 9 ব্যবহারকারীদের জন্য এই সেটটি সঠিকভাবে প্রদর্শন করার জন্য, নন-সিরিলাইজড হেলভেটিকার পরিবর্তে, একই স্ট্যান্ডার্ড ম্যাক ওএস 9 ফন্ট হেলভেটিকা ​​সিওয়াই উল্লেখ করা বোধগম্য, যার মধ্যে সিরিলিক রয়েছে।

Mac OS X প্রকাশের পর থেকে শাসকদের পড়া পরিবর্তিত হয়েছে। Windows/Mac OS X-এর জন্য এখন একটি সাধারণ স্ট্যান্ডার্ড ফন্ট নির্দিষ্ট করা আছে। এবং যদি আমরা চাই যে ম্যাক ওএস 9 ব্যবহারকারীরা ডিজাইনারের উদ্দেশ্য দেখতে সক্ষম হোক, আমাদের ফন্ট লাইনে সিরিলিক ধারণকারী একটি ফন্ট অন্তর্ভুক্ত করতে হবে।

তাই নিরাপদ ফন্ট না থাকলেও ফন্টের নিরাপদ পরিবার রয়েছে। তাদেরও বলা হয় ফন্ট সিএসএস স্ট্যাক. স্ট্যান্ডার্ড উইন্ডোজ/ম্যাক ওএস এক্স ফন্ট ছাড়াও, এই লাইনগুলিতে ম্যাক ওএস 9 এর স্ট্যান্ডার্ড সেট (যা ডিফল্টরূপে "নিরাপদ" ফন্ট ধারণ করে না) এবং সাধারণ ইউনিক্স/লিনাক্স ফন্টগুলির সমতুল্য ফন্টগুলিও অন্তর্ভুক্ত করতে পারে।

যেকোন লেআউট ডিজাইনার শীঘ্র বা পরে এমন একটি মুহুর্তের মুখোমুখি হয় যখন একজন ডিজাইনার একটি লেআউটে একটি ফন্ট ব্যবহার করেন যা "নিরাপদ" ফন্টের তালিকায় অন্তর্ভুক্ত নয়; কিন্তু এটা এখনও অ্যালার্ম বাজানোর কারণ নয়! উদাহরণস্বরূপ, ডিজাইনাররা প্রায়শই লেআউটগুলিতে তাহোমা ফন্ট ব্যবহার করে, যা এই তালিকায় অন্তর্ভুক্ত নয়। ফন্টগুলির একটি সঠিকভাবে নির্মিত লাইন শুধুমাত্র তাহোমা নয়, অন্যান্য ফন্টগুলিও ব্যবহার করার সম্ভাবনা উন্মুক্ত করে। ক্রমবর্ধমান সংখ্যক ডিজাইনার এই সুযোগের সদ্ব্যবহার করছেন এবং একজন দক্ষ লেআউট ডিজাইনারকে এই বিষয়ে জানা উচিত।

নীচে ফন্টগুলির একটি অতিরিক্ত সারণী রয়েছে যা "নিরাপদ" ফন্টগুলির তালিকায় অন্তর্ভুক্ত নয়, তবে লেআউটগুলিতে ব্যবহার করা যেতে পারে৷

যদি কোন সিরিলিক বর্ণমালা না থাকে?

ইংরেজি ভাষার পাঠ্যগুলির জন্য, উপরের টেবিলগুলির একটি সামান্য ভিন্ন চেহারা আছে।

এরিয়াল, কুরিয়ার নিউ এবং টাইমস নিউ রোমান ফন্টের জন্য, রুলার তৈরি করার সময়, প্রথমে ইউনিক্স/লিনাক্স ফন্ট এবং তারপরে ম্যাক ওএস ফন্ট উল্লেখ করা ভাল। এটি Linux X11 কোর ফন্ট সেটের কিছু কুটিলতার কারণে হয়েছে।

যে ফন্টগুলি "নিরাপদ" তালিকায় অন্তর্ভুক্ত নয়, তবে লেআউটে ব্যবহার করা যেতে পারে, এই টেবিলের উপর ভিত্তি করে CSS ফন্ট স্ট্যাকগুলি দ্বারা আরও ভালভাবে সংজ্ঞায়িত করা হয়।

ইউনিক্স/লিনাক্স কলামে একটি ড্যাশ নির্দেশ করে যে এই অপারেটিং সিস্টেমের ব্যবহারকারীরা সম্ভবত পৃষ্ঠায় ডিফল্ট ফন্ট দেখতে পাবে।

প্রতিটি ডিজাইনার টেক্সট তথ্য প্রদর্শন করার জন্য তাদের কাজে ক্রমাগত পাঠ্য তথ্য ব্যবহার করে। সাধারণত, একটি ফন্ট নির্বাচন করার সময়, তাকে শুধুমাত্র টাইপফেসের আকর্ষণীয়তা বা পাঠযোগ্যতাই নয়, অনেক প্রযুক্তিগত পরামিতিও বিবেচনা করতে হবে।

উদাহরণস্বরূপ, বেশিরভাগ প্রিন্টিং হাউস সিস্টেম ফন্ট ব্যবহার করে ডিজাইন করা একটি নথি গ্রহণ করবে না। এর কারণ হল স্ট্যান্ডার্ড ফন্টগুলি সংস্করণগুলির মধ্যে সামান্য পরিবর্তিত হতে পারে।

কিন্তু একটি ওয়েব পৃষ্ঠা তৈরি করার সময়, বিপরীতে, আপনাকে মানকগুলির একটি সেট থেকে একটি ফন্ট বেছে নেওয়া উচিত। নীচে উইন্ডোজের বিভিন্ন সংস্করণের স্ট্যান্ডার্ড ডিস্ট্রিবিউশনে মৌলিক ফন্টের উপস্থিতির একটি টেবিল রয়েছে।

অনুগ্রহ করে মনে রাখবেন যে সিস্টেমে যে কোনও ফন্টের উপস্থিতি অপারেটিং সিস্টেম ইনস্টল করার সময় নির্বাচিত বিকল্পগুলির পাশাপাশি ব্যবহৃত সফ্টওয়্যারের উপর নির্ভর করে।

উইন্ডোজের প্রতিটি সংস্করণের সাথে বেশ কয়েকটি ফন্ট রয়েছে। এই ফন্টগুলি ওয়েব ডিজাইন এবং ইলেকট্রনিক ডকুমেন্ট তৈরির জন্য সবচেয়ে নিরাপদ যা বিভিন্ন কম্পিউটারে একই প্রদর্শন করতে হবে।

নিরাপদ ফন্ট: Arial, কুরিয়ার, কুরিয়ার নিউ, MS Sans Serif, MS Serif, Symbol, Times New Roman.

এমন কিছু ফন্ট আছে যা উইন্ডোজের পূর্ববর্তী সংস্করণে অন্তর্ভুক্ত নয়, তবে সিস্টেমে প্রায় অবশ্যই উপস্থিত রয়েছে (অতিরিক্ত সফ্টওয়্যার যেমন মাইক্রোসফ্ট অফিসের সাথে ইনস্টল করা হয়েছে)। নিরাপদ ফন্ট: Arial, কুরিয়ার, কুরিয়ার নিউ, MS Sans Serif, MS Serif, Symbol, Times New Roman.

ফন্টগুলি একটি ওয়েবসাইটের ডিজাইনের একটি অবিচ্ছেদ্য এবং অত্যন্ত গুরুত্বপূর্ণ অংশ, এটির ব্যক্তিত্বের উপর জোর দেয়। নিবন্ধটি একটি ওয়েব পৃষ্ঠায় স্ট্যান্ডার্ড ফন্টগুলিকে সংযুক্ত করার বিষয়ে কথা বলবে, সেগুলিকে সিস্টেম ফন্টও বলা হয়।

সিস্টেম, স্ট্যান্ডার্ড, নিরাপদ ফন্ট

যেকোনো ব্রাউজার শুধুমাত্র সেই ফন্টগুলি প্রদর্শন করে যা কম্পিউটারের অপারেটিং সিস্টেমে উপস্থিত থাকে। এই কারণেই তাদের সিস্টেম বলা হয় এবং অপারেটিং সিস্টেমের সাথে ডিফল্টরূপে ইনস্টল করা হয়।

এবং সেগুলিকে নিরাপদ ফন্ট বলা হয় কারণ সেগুলি বেশিরভাগ সাইটের ভিজিটরদের ব্রাউজারে প্রদর্শিত হতে পারে৷

কিন্তু সমস্যা হল বিভিন্ন অপারেটিং সিস্টেমে বিভিন্ন সেট ফন্ট ইনস্টল করা থাকে। আপনি Windows এবং Mac OS এর অফিসিয়াল পৃষ্ঠাগুলিতে অপারেটিং সিস্টেমের সাথে সরবরাহকৃত ফন্টের সেটগুলি দেখতে পারেন৷ এবং ইউনিক্স/লিনাক্সে কোনও স্ট্যান্ডার্ড সেট নেই।

ডিজাইনারের ধারণা অনুসারে ইন্টারনেট পৃষ্ঠাটি প্রদর্শিত হওয়ার জন্য, সিএসএস-এ ফন্ট-ফ্যামিলি নামে একটি ফন্ট বৈশিষ্ট্য ইনস্টল করা হয়েছিল।

ফন্ট-পরিবারের সম্পত্তি

ফন্ট-ফ্যামিলি প্রপার্টি হ'ল ফন্ট ফ্যামিলিগুলিকে নির্দিষ্ট বৈশিষ্ট্য দ্বারা গোষ্ঠীবদ্ধ করা হয়।

• serif - শেষে serifs সহ ফন্ট;
• sans-serif - sans-serif ফন্ট;
• cursive - তির্যক ফন্ট;
• ফ্যান্টাসি - আলংকারিক ফন্ট;
• মনোস্পেস - মনোস্পেস ফন্ট (একই প্রস্থের অক্ষর সহ)।

এইভাবে, বিভিন্ন অপারেটিং সিস্টেম থেকে অনুরূপ ফন্টগুলি সহজভাবে নির্বাচন করা হয় এবং কমা দ্বারা পৃথক করা ইন্টারনেট পৃষ্ঠার সাথে সংযুক্ত করা হয়।

এখানে একটি উদাহরণ, শুধুমাত্র চাক্ষুষ উপলব্ধি জন্য. আমরা পরে এই উদাহরণে ফিরে যাব যখন আমরা সরাসরি সংযোগ ফন্ট বিবেচনা করব।

শুধু যুক্তি অনুসরণ করুন এবং সবকিছু স্ফটিক পরিষ্কার হয়ে যাবে।

বডি ( হরফ-পরিবার: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) আসুন বিশ্লেষণ করা যাক কি লেখা আছে:

• ওএস উইন্ডোজ - এরিয়াল;
• ওসি ম্যাক ওএস - হেলভেটিকা ​​সিওয়াই;
• ওসি ইউনিক্স/লিনাক্স - নিম্বাস সানস এল;
• সাধারণ পরিবার - sans-serif.

তথাকথিত নিরাপদ ফন্ট

ওএস উইন্ডোজের উপর ভিত্তি করে, বেশ কয়েকটি নিরাপদ ফন্টের একটি তালিকা সংকলন করা হয়েছে।

1. আরিয়াল
2. এরিয়াল ব্ল্যাক
3. কমিক সানস এমএস
4. কুরিয়ার নিউ
5. জর্জিয়া
6. প্রভাব
7. টাইমস নিউ রোমান
8. ট্রেবুচেট এমএস
9. ভার্দানা

এই সমস্ত ফন্টগুলি Mac OS X, Windows, এবং অনেক ইউনিক্স/লিনাক্স ব্যবহারকারী যাদের ওয়েব প্যাকেজের জন্য মূল ফন্ট ইনস্টল করা আছে তাদের ইনস্টল করা আছে।

অন্যান্য ব্যবহারকারীদের জন্য, একটি চিঠিপত্র টেবিল প্রদান করা হয়. এটিতে একটি নির্দিষ্ট পরিবারের অনুরূপ ফন্ট রয়েছে।

চিঠিপত্রের সারণী এবং একটি নির্দিষ্ট পরিবারের সাথে ফন্টগুলির অন্তর্গত:

* ফন্ট সংযোগ করার সময়, আপনি নিরাপদে এটির উপর নির্ভর করতে পারেন। টেবিলটি সিরিলিক অক্ষর এবং রাশিয়ান বর্ণমালা সমর্থন করে।

সাইটে সিস্টেম ফন্ট সংযোগ

আপনার যদি সংযোগের প্রয়োজন হয় পুরো নথির জন্য প্রধান ফন্ট, আপনাকে শুধুমাত্র CSS স্টাইল শীটে নিম্নলিখিত কোড যোগ করতে হবে:

মূল অংশ ( /* সম্পূর্ণ নথিতে ফন্টটি সংযুক্ত করুন */ ফন্ট-পরিবার: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* অতিরিক্তভাবে ফন্টের আকার সেট করুন */ font-size: 16px; / * সাহসী ফন্ট সেট করুন, অথবা 400 এর পরিবর্তে, মান সেট করুন - স্বাভাবিক */ ফন্ট-ওজন: 400; )

এবং এইভাবে বুটস্ট্র্যাপ 4 ফ্রেমওয়ার্কে সিস্টেম ফন্টগুলি সংযুক্ত করা হয়েছে: মোবাইল ডিভাইসের কথা মাথায় রেখে ফন্ট অন্তর্ভুক্ত করা হয়েছে।

বডি (ফন্ট-ফ্যামিলি: -অ্যাপল-সিস্টেম,ব্লিঙ্কম্যাকসিস্টেমফন্ট,"সেগো ইউআই", রোবোটো,"হেলভেটিকা ​​নিউ", এরিয়াল,সান-সেরিফ,"অ্যাপল কালার ইমোজি","সেগো ইউআই ইমোজি","সেগো ইউআই সিম্বল";)

শিরোনাম জন্য একটি ফন্ট বরাদ্দ

H1, H2, H3, H4, H5, H6 - এখানে এটি একই, শুধুমাত্র আমরা শিরোনামগুলি হাইলাইট করার জন্য সাহসিকতার মান সেট করি:

H1, h2, h3, h4, h5, h6 ( ফন্ট-ফ্যামিলি: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* হরফটিকে শিরোনামের সাথে সংযুক্ত করুন */ ফন্ট-ওজন: 600; / * ফন্টের ওজন সেট করুন, বা 600 এর পরিবর্তে, মানটিকে বোল্ডে সেট করুন */ )

আমরা শুধুমাত্র অনুচ্ছেদের জন্য একটি ফন্ট বরাদ্দ করি:

1. আমরা ফন্টটিকে অনুচ্ছেদের সাথে সংযুক্ত করি, এটি li তালিকা, ডিভ ব্লক, ফর্ম এবং অন্যান্য উপাদানগুলিতে প্রয়োগ করা যেতে পারে;
2. ফন্টের ওজন সেট করুন, বা 600 এর পরিবর্তে, মানটিকে বোল্ডে সেট করুন;
3. অতিরিক্তভাবে, আমরা অনুচ্ছেদের জন্য ফন্টের আকার সেট করি।

প্রতি শুধুমাত্র একটি নির্দিষ্ট অনুচ্ছেদে একটি ফন্ট বরাদ্দ করুন, অথবা ব্লক, আপনাকে প্রথমে HTML নথিতে এই ব্লকে একটি ক্লাস বরাদ্দ করতে হবে:

এখানে একটি প্লাগইন ফন্ট সহ একটি অনুচ্ছেদ রয়েছে

এবং CSS টেবিলে নিম্নলিখিত কোড লিখুন:

প্রধান-ফন্ট (ফন্ট-ফ্যামিলি: এরিয়াল, "হেলভেটিকা ​​সিওয়াই", "নিম্বাস সানস এল", সান-সেরিফ; ফন্ট-ওজন: স্বাভাবিক; ফন্ট-আকার: 16px; )

এখন, প্রতিটি ট্যাগ - একটি .ফন্ট ক্লাস সহ একটি এইচটিএমএল উপাদান (আপনি যা খুশি তাই বলুন) একটি এরিয়াল ফন্ট বরাদ্দ করা হবে, স্বাভাবিক (400), সাহসীতা এবং 16 পিক্সেলের আকার সহ।
একইভাবে, আপনি li তালিকা, টেবিল, সম্পূর্ণ ডিভি ব্লক, পৃথক শব্দ বা বাক্যাংশে বিভিন্ন ফন্ট বরাদ্দ করতে পারেন।

একটি HTML নথিতে সরাসরি ফন্ট সংযোগ করা

ফন্টগুলি সরাসরি একটি HTML নথিতে একটি CSS ফাইলের মতোই অন্তর্ভুক্ত করা হয়, শুধুমাত্র পার্থক্যটি সিনট্যাক্সে। আপনি ডকুমেন্ট হেডারে ফন্ট অন্তর্ভুক্ত করতে পারেন - ট্যাগের মধ্যে (একটি CSS ফাইলের অনুরূপ), বা ইনলাইন - সরাসরি html ট্যাগগুলিতে বৈশিষ্ট্য বরাদ্দ করা।

হেডারে ফন্ট সহ, ট্যাগের মধ্যে . এটি করতে, html নথিতে নিম্নলিখিত কোড যোগ করুন:

সবকিছুই CSS ফাইলের সংযোগের মতো।

ফন্ট ইনলাইনে সংযোগ করা হচ্ছে

সরাসরি সাইট উপাদান. আমাকে আপনি কয়েক উদাহরণ দিতে:

অনুচ্ছেদের সাথে ফন্ট সংযুক্ত করা হচ্ছে

এখানে পাঠ্য সহ একটি অনুচ্ছেদ রয়েছে

এখানে টেক্সট সহ একটি অনুচ্ছেদ, এবং এই শব্দ, যা গাঢ়ভাবে হাইলাইট করা উচিত

এটি সাধারণ পাঠ্য এখানে লিঙ্কটিও সাধারণ পাঠ্য।

একইভাবে, আমরা যেকোনো html ট্যাগে ফন্ট বরাদ্দ করি।

দ্রষ্টব্য - বুটস্ট্র্যাপ 4 এ সিস্টেম ফন্ট

বিখ্যাত ফ্রেমওয়ার্ক বুটস্ট্র্যাপ 4-এর বিকাশকারীরা নিম্নলিখিত উপায়ে ফন্টগুলিকে সংযুক্ত করে যাতে প্রায় কোনও ডিভাইস তার স্ট্যান্ডার্ড সিস্টেম ফন্টগুলি ব্যবহার করতে পারে।

বডি (ফন্ট-ফ্যামিলি: -অ্যাপল-সিস্টেম, ব্লিঙ্কম্যাকসিস্টেমফন্ট, "সেগো ইউআই", রোবোটো, "হেলভেটিকা ​​নিউ", এরিয়াল, সান-সেরিফ, "অ্যাপল কালার ইমোজি", "সেগো ইউআই ইমোজি", "সেগো ইউআই সিম্বল";)