একাধিক ফন্ট-ওজন, একটি @ ফন্ট-মুখ কোয়েরি

Question

আমাকে ক্লাভিকা ফন্ট আমদানি করতে হবে এবং আমি এটি একাধিক আকার এবং আকারে পেয়েছি:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

এখন আমি জানতে চাই যে @font-faceএটিগুলি কেবল একটি- কোয়েরিতে সিএসএসে আমদানি করা সম্ভব , যেখানে আমি কোয়েরিতে সংজ্ঞা দিচ্ছি weight। আমি 8 বার জিজ্ঞাসাটি অনুলিপি / আটকানো এড়াতে চাই।

সুতরাং যেমন কিছু:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

Comments

এটি 1 হরফ নয় ... এটি একাধিক ফন্ট ... তাই দুর্ভাগ্যক্রমে, আমি মনে করি আপনাকে কেবল হাসি এবং সহ্য করতে হবে।

— পাওলি_ডি

হ্যাঁ দুঃখিত, এটি একই পরিবারের বিভিন্ন ফন্ট।

— রাভারভুর্ট 14

একাধিক ওয়েবফন্ট-ফাইলগুলি === বিভিন্ন ওজন

— এরিক

এই নিবন্ধটি যথাসাধ্য সাহায্য: 456bereastreet.com/archive/201012/... আসলে একটা সুতরাং এখানে উত্তরটি হল: stackoverflow.com/questions/10045859/... যে যে ব্যবহারগুলি নিবন্ধ, আপনি যা চান তা যেমন তুমি কি চাও সম্ভব নয় একটি বিকল্প।

— 97ldave

Answer 1

আসলে @ ফন্ট-ফেস এর একটি বিশেষ গন্ধ রয়েছে যা আপনি যা বলছেন ঠিক তা অনুমতি দেবে।

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

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

---

আপনি এখন নির্দিষ্ট করতে পারেন font-weight:boldবা font-style:italicআপনি ফন্ট পরিবারের নির্দিষ্ট করতে না থাকার বা অগ্রাহ্য ছাড়া পছন্দ কোন উপাদানে font-weightএবং font-style।

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

---

এই বৈশিষ্ট্যটির একটি সম্পূর্ণ ওভারভিউ এবং মানক ব্যবহারের জন্য এই নিবন্ধটি একবার দেখুন ।

---

উদাহরণস্বরূপ কলম

Comments

ঠিক যেমন আমি উপরে আমার মন্তব্যে পরামর্শ দিয়েছি ;-)

— 97ldave

আমার ক্ষেত্রে এটি কেবল সর্বনিম্ন @ ফন্ট-মুখ ব্যবহার করে। এটি হ'ল ফন্ট-ওজন: গা bold়; হরফ শৈলী: তির্যক; প্রতিবার আমি ফন্ট-পরিবারকে উল্লেখ করি: 'ড্রয়েডসারিফ';

— সাইমন আর্নল্ড

আপনার কি এমন একটি পরীক্ষা আছে যা প্রমাণ করে যে এই পদ্ধতিটি আসলে কাজ করছে? আপনি কীভাবে প্রমাণ করবেন যে ব্রাউজারটি সঠিক ফন্ট ফাইলটি না পড়ে কেবল ওজন বা স্টাইলটি নকল করে না?

— rojobuffalo

@রোজুফালো এখানে একটি উদাহরণ কলম, এটি প্রত্যাশার মতো কাজ করছে।

— maioman

@rojobuffalo একটি খুব বৈধ পয়েন্ট তোলে। এটি প্রত্যাশার সাথে আচরণ করবে বলে দৃser়তার প্রমাণের জন্য কলম কিছুই করে না। বিশেষত, আমি সিএসএস উদাহরণ থেকে গা bold় ফন্ট-মুখের ঘোষণাটি সরিয়ে দিয়ে আবার চালিয়েছি। চেহারা ছিল অভিন্ন। এটি কি ক্যাশে থেকে টানছিল? ব্রাউজারটি কি নিয়মিত হরফের প্রদর্শিত ওজনকে সহজেই ফিজ করে দিছিল?

Answer 2

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}

Comments

এটি কেন সমস্যার সমাধান করবে সে সম্পর্কে দয়া করে একটু ব্যাখ্যা লিখুন। এটি বাক্য হিসাবে সহজ কিছু হতে পারে।

— ggderas

আগের মত একই সমাধান। কেবল সংক্ষিপ্ত স্বরলিপি :)

— মিরকা নিমসভ

এই স্বরলিপিগুলি সম্পর্কে আমি কোথায় পড়তে পারি? এটি এমডিএন-এ দেখবেন না

— তুষারপাত

এটি কাজ করছে বলে মনে হচ্ছে না এবং আমি কোনও উত্স খুঁজে পাচ্ছি না, তবুও এটির সত্যতা আছে বলে মনে হচ্ছে।

— 11:30