সিএসএসে ফন্ট-ওজন বনাম সাহসী ফন্ট-পরিবার নির্ধারণ, যা আরও সঠিক?

Question

সিএসএসে হরফ হরফ করার দুটি উপায় রয়েছে: font-familyঅ্যাট্রিবিউট এবং অ্যাট্রিবিউটের মাধ্যমে font-weight।

ধরা যাক আমি উদাহরণস্বরূপ র্যালওয়ে ফন্টটি ব্যবহার করছি এবং CSS এর মাধ্যমে একটি লাইট, একটি নিয়মিত, একটি সেমিবোল্ড এবং একটি বোল্ড ভেরিয়েন্ট লোড করেছি। আমি একটি সহজ শিরোনাম তা সেট করে বোল্ড তুলতে পারে h1{font-family: 'Raleway Bold'}বা h1{font-weight: 700}।

এর মধ্যে কোনটি আরও সঠিক, বা এই দুটি একই?

Comments

আমার সন্দেহ আছে যে সিএসএসে "ফন্ট-ওজন" লেখা সঠিক, যখন আপনার ফন্ট পরিবারে সমস্ত বিকল্প থাকে। উদাহরণস্বরূপ: র‌্যালওয়ে ফন্টে হালকা থেকে অতিরিক্ত গা bold় পর্যন্ত সমস্ত বিকল্প রয়েছে। সুতরাং পরিবার থেকে সমস্ত ফন্ট ব্যবহার করার জন্য কোন উপায়ে উপযুক্ত, যাতে আমরা ফন্টের চরিত্রটি আলগা করতে পারি না।

— পূজা

খুব সম্পর্কিত Q & A- ।

— কাই

@ পূজা, আমি ফর্ম্যাটটি আরও পরিষ্কার করার জন্য এবং আসল প্রশ্নটিকে অগ্রভাগে আরও সামনে আনতে আপনার প্রশ্ন সম্পাদনা করার স্বাধীনতা নিয়েছি। আপনি যদি মনে করেন যে আমি অর্থটি পরিবর্তন করেছি তবে আপনি নিজেই এটি সম্পাদনা করতে পারেন ।

— পাইবি

Answer 1

ধরা যাক আমরা এর মতো একটি বোল্ড ফন্টের ভেরিয়েন্টটি লোড করেছি:

@font-face {
  font-family: 'Raleway Bold';
  font-style: normal;
  font-weight: 700;
  src: url(path/to/font/raleway-bold.woff2) format('woff2');
}

আমি উভয় ব্যবহারের পক্ষে তর্ক করবে font-familyএবং font-weightআপনার শৈলী স্পেসিফিকেশন হবে। উদাহরণ স্বরূপ:

h1 {
  font-weight: 700;
  font-family: 'Raleway Bold', Helvetica, Arial, sans;
}

উভয়ই মূলত একই কাজ করে: আপনার শিরোনাম 1 সাহসী হতে বলুন। এটি সাহস বা কোনও দ্বিগুণ করবে না, এটি কেবল পুনরাবৃত্তি করে যে এটি সাহসী হওয়া দরকার।

এর কারণটি খুব সহজ: যদি আপনার ফন্ট ফাইলটি লোড না করা হয় (সার্ভার ওভারলোড, ক্লায়েন্টের বিধিনিষেধ, ভুডু), তবে আপনার দর্শনার্থী এখনও একটি সাহসী ফন্ট দেখতে পাবে (এক্ষেত্রে একটি মিথ্যা সাহসী হেলভেটিকা) এবং সুতরাং শিরোনামের মধ্যে পার্থক্য করতে পারে এবং বডি টেক্সট, যা আপনি কেবলমাত্র নির্দিষ্ট করে থাকলে কেস হবে না font-family।

এই চিত্রটিতে দেখুন শীর্ষটি সেটটি র‌্যালওয়ে এবং র‌্যালওয়ে ইটালিক তবে যথাযথ র‌্যালওয়ে ইতালিটি লোড হচ্ছে:

<link href='https://fonts.googleapis.com/css?family=Raleway:500,500italic' rel='stylesheet' type='text/css'>

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

Comments

পরিবারের একটি নাম এবং কেবলমাত্র ওজন নির্ধারণ করা ফন্ট ফাইল লোড না হওয়ার ক্ষেত্রে আপনাকে সঠিক ওজন দেবে give উভয়ই ব্যবহারের একমাত্র কারণটি হবে উপযুক্ততার কারণে।

— Cai

তুমি বিভ্রান্ত. আপনার Google ফন্ট উদাহরণ শুধুমাত্র Raleway ইটালিক বোঝায় না ঠিক যেমন font-family: 'Raleway'(উপরে আপনার সাহসী উদাহরণ contradicting) কিন্তু, উপরন্তু, তথাপি পুরো পরিবার নামকরণ Ralewayবিভিন্ন ফন্ট পরিবারের নামের সাথে পৃথকভাবে অথবা প্রতিটি বৈকল্পিক হয়েছে একেবারে কোন জন্মদান ভুল বা না প্রয়োগের উপর । এমনকি আপনার নিজের উদাহরণটি প্রমাণ করে যে এটি একটি ভুল পদ্ধতি, যেমন আপনার সরবরাহিত font-family: 'Raleway Bold', Helvetica, Arial, sans;রয়েছে Helvetica Boldএবং Arial Boldস্বতন্ত্রভাবে কারণ এটি কেবলমাত্র ক্যাসকেড ফন্টের ভেরিয়েন্টগুলির ভুল উপায়।

— rgthree

Answer 2

উভয় উপায়েই আপনাকে সঠিক আউটপুট দেবে, তত বেশি সঠিক উপায় হ'ল একক ফন্ট-পরিবারকে ওজন এবং শৈলীর সমস্ত বিভিন্ন প্রকারের গোষ্ঠীকরণ করতে ব্যবহার করা। আপনি সিস্টেম ফন্টগুলি একইভাবে ব্যবহার করেন ('আড়িয়াল থেকে শুরু করে' সানস-সেরিফ 'পর্যন্ত) এবং বাস্তবে আপনি যদি রেলওয়ে লোড করতে গুগল ফন্ট ব্যবহার করেন তবে আপনি একক ফন্টের পারিবারিক রুটটি ব্যবহার করবেন।

আসুন এটি সঠিক পদ্ধতি কেন এমন কয়েকটি কারণের বাহ্যরেখা করি।

এটি সিএসএস জটিলতা হ্রাস করে, শেষ পর্যন্ত, ফাইল আকার

একক ফন্ট-পরিবার থাকার অর্থ হ'ল আপনি হরফ পরিবারের সাথে একটি সম্পূর্ণ উপাদান যুক্ত উপাদান এবং বিভিন্ন ওজন / শৈলীর সাথে নির্দিষ্ট কিছু উপাদানকে সংজ্ঞায়িত করতে পারেন। উদাহরণস্বরূপ নিম্নলিখিতগুলি নিন:

html {
  font-family: Raleway;
}
.bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.footer {
  font-family: Arial;
}

<p>I'm raleway font, <span class="bold">and I'm raleway bold</span></p>
<div class="bold italic">I'm Raleway Bold Italic!</div>
<div class= footer>I'm <span class="bold">Arial Bold,</span> w/ the same class!</div>

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

এটি ব্রাউজারটি যেভাবে করে।

উপরেরটি মূলত ব্রাউজারের অভ্যন্তরীণ স্টাইলশিটটি কীভাবে ন্যূনতম শৈলী এবং সিএসএসের সহজাত ক্যাসকেডিং প্রকৃতি ব্যবহার করে ফন্টগুলি সংজ্ঞায়িত করে।

শিল্পটি এটি করে এবং এটি করে।

বৃহত্তম ওয়েব বৈশিষ্ট্য, অ্যাপ্লিকেশন এবং প্রকাশকরা সকলেই এইভাবে এটি করে। গুগল, ফেসবুক, এনওয়াইটি, ইএসপিএন ইত্যাদি সমস্ত এই পদ্ধতিতে ফন্টগুলি সংজ্ঞায়িত করে এবং ব্যবহার করে।

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

গুগল ফন্টগুলি থেকে লোড করুন।

যদি আপনি গুগল ফন্টে ফ্রি ওয়েবফন্টস সংগ্রহশালা থেকে র‌্যালওয়ে লোড করেন তবে আপনি দেখতে পাবেন যে র‌্যালওয়ে একক পরিবারের নামের সাথে সংজ্ঞায়িত হয়েছে:

https://fonts.googleapis.com/css?family=Raleway:400,400italic,500,500italic,700,700italic

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url(https://...Raleway-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 500;
  src: url(https://...Raleway-MediumItalic.woff2) format('woff2');
}
@font-face {
  font-family: 'italic';
  font-style: normal;
  font-weight: 700;
  src: url(https://...Raleway-BoldItalic.woff2) format('woff2');
}

Comments

এই পদ্ধতিটি ভুলদের জন্য ফন্ট শৈলীর মধ্যে বিভিন্নতা উপেক্ষা করে না?

— রায়ান

@ রায়ান মোটেও নয় প্রকৃতপক্ষে, ফন্ট পরিবারের নাম (হয় সঠিকভাবে Ralewayওজন / শৈলীর বৈকল্পিক হিসাবে পরিবারকে বান্ডিল করা, বা পৃথক ভেরিয়েন্টগুলি ভুলভাবে সংজ্ঞায়িত করা Raleway Boldএবং Raleway Italicস্বতন্ত্র ফন্ট-পরিবার হিসাবে) এর ভুয়া বৈচিত্র প্রয়োগ করার ক্ষেত্রে কোনও ফল নেই। প্রকৃতপক্ষে, একই নামে পরিবারকে সঠিকভাবে বান্ডিল করা ব্রাউজারকে একটি ভুল শৈলী প্রয়োগ করতে আরও ঘনিষ্ঠতর পরিবর্তন বাছাই করতে সহায়তা করে যখন প্রতিটি পরিবর্তনের ভুলভাবে নামকরণ করা হয় যদি পছন্দসই ফন্টটি লোড না হয় তবে ব্রাউজারটিকে উপলব্ধ ফন্টগুলির অন্ধকারে রাখে ations

— rgthree

(১) গুগল হরফ থেকে কেবল লোড করুন : ওয়েবসাইটগুলি নিশ্চিত, তবে এমন অনেকগুলি উদাহরণ রয়েছে যেখানে এইচটিএমএল / সিএসএস ব্যবহৃত হয় যেখানে ইন্টারনেট সংযোগের নিশ্চয়তা নেই এবং আপনাকে স্থানীয়ভাবে ফন্টগুলি লোড করতে হবে, (২) এটি CSS জটিলতা হ্রাস করে একটি, শেষ পর্যন্ত, ফাইলের আকার : সুতরাং আপনি এমন কোনও সাইট বা অ্যাপ্লিকেশনটিতে 1 কেবি শেভ করবেন যা কয়েক ডজন এমবি রয়েছে, ক্লায়েন্ট আপনার অ্যাপ্লিকেশনটি কত দ্রুত লোড করবে তা দেখে অবাক হয়ে যাবে, (3) এটি ব্রাউজার / শিল্প যেভাবে এটি করে : ব্রাউজারগুলি ভুল ডিফল্ট, এবং যাহাই হউক না কেন 'শিল্প' সবসময় সঠিক নয় না এটা সর্বোত্তম কার্যাভ্যাস অনুসরণ করে (ঠিক flexbox তাকান)

— PieBie

ব্রাউজারগুলি কি ভুল ? আপনি কী সম্পর্কে কথা বলছেন তা আপনি পরিষ্কারভাবে জানেন না। আপনি যখন নির্দিষ্ট করেন font-family:Arial; font-weight:bold;(কোনটি আবার এটি করার সঠিক উপায় , এটি আরিল বা রালওয়ে নির্বিশেষে) আপনি কি মনে করেন যে ব্রাউজারটি একটি সাধারণ আড়িয়াল ফন্টের মুখের জন্য একটি ভুয়া বোল্ড প্রয়োগ করছে? ত্রুটিপূর্ণ. সিস্টেমটি সংজ্ঞায়িত করার সাথে সাথে ব্রাউজারটি আরিয়ালবোল্ড ফন্টের মুখটি লোড করছে এবং সঠিক কোনও ফন্ট না পাওয়া গেলেই এটি ফন্ট-পরিবারের নামের উপর ভিত্তি করে সেরা মেলানো ফন্টে একটি ছদ্ম শৈলী প্রয়োগ করবে, এজন্য তাদের অবশ্যই একই হতে হবে ! "আরিয়ালের জন্য এটি করুন, তবে র‌্যালওয়ে নয়" বলতে পারবেন না।

— rgthree

Answer 3

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

আপনি নিজেই কোনও ফন্ট এম্বেড করার পরে এখন আপনার সমস্যা হতে শুরু করে, একটি ফন্ট যা CSS এর জন্য অগত্যা পরিকল্পনা করা হয়নি এবং ওজনগুলি সংখ্যার সাথে মেলে না।

এর কারণে, এম্বেড করা ফন্টগুলির মধ্যে একটি খুব সাধারণ বাগ, অ-ইংরাজী ফন্টে অত্যন্ত সাধারণ, সিএসএস "বোল্ডেনস" বা "আলোকিত" ফন্টটি স্বয়ংক্রিয়ভাবে তৈরি হয় এবং ফলাফলটি খুব খারাপ।

অতএব আমি আপনাকে সুপারিশ করছি যে আপনি যদি গুগল ফন্টে ফন্টের মতো একটি ওয়েবফন্ট ব্যবহার করেন, এগিয়ে যান এবং ফন্ট-ওজনে নম্বরগুলি ব্যবহার করুন তবে আপনি যখন কোনও ফন্ট এম্বেড করেন, তখন নিরাপদ পাশে থাকুন এবং প্রতিটি একক ওজনের জন্য আলাদাভাবে ফন্ট-পরিবার ব্যবহার করুন ।