একই ফন্টের জন্য একাধিক ফন্ট ফাইল কীভাবে যুক্ত করবেন?

Question

আমি @ ফন্ট-ফেস সিএসএস নিয়মের জন্য এমডিসি পৃষ্ঠাটি দেখছি, তবে আমি একটি জিনিস পাই না। বোল্ড , তাতালিক এবং গা bold় + তাতালিকের জন্য আমার কাছে পৃথক ফাইল রয়েছে । আমি কীভাবে একটি @font-faceনিয়মে তিনটি ফাইল এম্বেড করতে পারি ? উদাহরণস্বরূপ, যদি আমার কাছে থাকে:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

ব্রাউজারটি কোন হরফের জন্য কোন ফন্টটি ব্যবহার করতে হবে তা জানবে না (কারণ সেই ফাইলটি দেজাভুসান্সবোল্ড.টিটিএফ), তাই এটি সম্ভবত আমি চাই না এমন কোনও ডিফল্ট হবে। আমি একটি নির্দিষ্ট ফন্টের জন্য আমার কাছে থাকা সমস্ত ভিন্ন রূপটি কীভাবে ব্রাউজারকে বলতে পারি?

Comments

প্রশ্নটির এক্সটেনশন হিসাবে আমরা যদি এই ফন্টগুলি WYSIWYG সম্পাদকগুলিতে TinyMCE এর মতো ব্যবহার করি তবে আমাদের কি এখনও বোল্ড ইটালিকসের প্রয়োজন? টিনিএমসিই সত্ত্বেও বোল্ড ইটালিক্স করার জন্য বোতাম রয়েছে? আমার অনুমানের উত্তরটি হ্যাঁ - কারণ আন্তঃসংক্ষেপে তারা এই ফাইলগুলি সন্ধান করে?

— নিশান্ত

ফন্টগুলি একত্রিত করার

— ব্যবহারকারী 2284570

Answer 1

সমাধানটি একাধিক @font-faceনিয়ম যুক্ত করে মনে হচ্ছে , উদাহরণস্বরূপ:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

যাইহোক, মনে হয় গুগল ক্রোম format("ttf")আর্গুমেন্ট সম্পর্কে জানে না , তাই আপনি এটি এড়াতে চাইতে পারেন।

(এই উত্তরটি সিএসএস 2 স্পেসিফিকেশনের জন্য সঠিক ছিল CSS3 কেবলমাত্র কমা-বিচ্ছিন্ন তালিকার চেয়ে একটি ফন্ট-স্টাইলের জন্য মঞ্জুরি দেয়)

Comments

ক্রমটি গুরুত্বপূর্ণ, গা bold় / তির্যক শৈলীর শেষ অবধি আসতে হবে।

— দ্য হু

আপনি EOT ব্যবহার করেও, এটি IE8 (এবং নীচে) তে কাজ করে না তা লক্ষণীয়। IE বিকল্প টাইপফেসটি ডাউনলোড করবে, তবে এটি ব্যবহার করবে না, পরিবর্তে এটি নিয়মিত টাইপফেসে নকল-সাহসী / তির্যক হয়ে উঠবে। এছাড়াও, ক্রোম 11 এমন একটি টাইপফেস রেন্ডার করতে ব্যর্থ হয়েছে যা উভয়

— গা

এই উদাহরণটি ফন্টগুলির জন্য নিখুঁতভাবে কাজ করে যা সাহসী এবং তির্যক জন্য পৃথক টিটিএফ ফাইল আছে। তবে যদি পুরো ফন্টটি একটি .tf ফাইলে থাকে এবং আপনি সাহসী ব্যবহার করতে চান তবে কীভাবে এটি কাজ করবে?

এই নিবন্ধটি কেন এটি কাজ করে তা ব্যাখ্যা করে একটি দুর্দান্ত কাজ করে। মূল অংশ: "লক্ষ্য করুন যে ফন্ট-পারিবারিক সম্পত্তি চারটি ফন্টের একই নাম Also এছাড়াও, ফন্ট-শৈলী এবং ফন্ট-ওজন হরফ হ'ল ফন্টটি। দ্রষ্টব্য: সাধারণ ওজন অবশ্যই তালিকার শীর্ষে থাকতে হবে! "এটির পরে যে অর্ডারটি গুরুত্বপূর্ণ তা আমরা খুঁজে পাইনি।"

— জেডি স্মিথ

এম্বেড করা ব্রাউজার অ্যান্ড্রয়েড অ্যান্ড্রয়েড ৪.৪ এ এই স্নিপড নিয়ে আমার সমস্যা হয়েছিল। সব কিছু ঠিক করার জন্য দেখে মনে font-style: italic, oblique;হচ্ছে এটি শেষ হয়েছে font-style: italic;।

— জাভি

Answer 2

সিএসএস 3 হিসাবে, কেবলমাত্র একটি একককে মঞ্জুরি দিয়ে, অনুমিত পরিবর্তন হয়েছে font-style। একটি কমা-বিচ্ছিন্ন তালিকা (প্রতি সিএসএস 2) এমন হিসাবে বিবেচনা করা হবে যা এটি আগের normalএবং পূর্ববর্তী কোনও (ডিফল্ট) প্রবেশকে ওভাররাইড করে। এটি এইভাবে সংজ্ঞায়িত ফন্টগুলি স্থায়ীভাবে তির্যক প্রদর্শিত হবে।

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

বেশিরভাগ ক্ষেত্রেই, তাত্পর্যটি সম্ভবত পর্যাপ্ত হবে এবং আপনি যে কোনওটি ব্যবহার করবেন এবং এটির সাথে লেগে থাকবেন তা সংজ্ঞায়িত করতে যত্ন নিলে তির্যক নিয়মগুলি প্রয়োজনীয় হবে না।

Comments

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

— নাথান মেরিল

ওপি দ্বারা @ নাথানমিরিল: I have separate files for bold, italic and bold + italic- সুতরাং তিনটি পৃথক ফাইল আছে। এই উত্তরটি এতে স্বীকৃত উত্তরটিকে সংশোধন করে font-style: italic, oblique;আর বৈধ নয়, তবে সেই উত্তরটি একই ফাইলটিকে তির্যক এবং তির্যক জন্য ব্যবহার করেছে। তবুও, ফাইলটি দুটি ক্ষেত্রে ভাগ করে নেওয়া উচিত তা উল্লেখযোগ্য।

— সিলি ফ্রিক

Answer 3

ফন্টের ভিন্নতা সঠিকভাবে কাজ করতে, আমাকে সিএসএসে @ ফন্ট-ফেস ক্রমটি বিপরীত করতে হয়েছিল।

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

Comments

খুব দরকারী. +1

— মিঃ পলিহর্ল

"বিপরীত ক্রম" বলতে কী বোঝ ?

— Nyxynyx

Answer 4

আজকাল 2017-12-17। আমি ফন্ট-সম্পত্তি-অর্ডারের অপরিহার্যতা সম্পর্কে কোনো বিবরণ খুঁজে না বৈশিষ্ট । এবং ক্রোমে আমি পরীক্ষা করি সর্বদা অর্ডার যাই হোক না কেন কাজ করে।

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

Answer 5

আপনি যদি গুগল ফন্ট ব্যবহার করেন তবে আমি নীচের পরামর্শ দেব।

আপনি যদি লোকালহোস্ট বা সার্ভার থেকে ফন্টগুলি চালনা করতে চান তবে আপনার ফাইলগুলি ডাউনলোড করতে হবে।

ডাউনলোড লিঙ্কগুলিতে টিটিএফ প্যাকেজগুলি ডাউনলোড করার পরিবর্তে তারা প্রদত্ত লাইভ লিঙ্কটি ব্যবহার করুন, উদাহরণস্বরূপ:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

আপনার ব্রাউজারে ইউআরএল আটকান এবং আপনার প্রথম উত্তরের মতো একটি ফন্ট-মুখের ঘোষণা পাওয়া উচিত।

প্রদত্ত ইউআরএলগুলি খুলুন, ফাইলগুলি ডাউনলোড করুন এবং নাম পরিবর্তন করুন।

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

Answer 6

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

Answer 7

গা bold় বৈকল্পিকের জন্য ভুলে যাবেন না, এটি হ'ল font-weight; ইটালিক ভেরিয়েন্টের জন্য, এটিfont-style

Comments

সমস্যার সাথে খুব একটা সম্পর্কিত নয় এবং @font-faceতাই আমি এই উত্তরটি হ্রাস করার চেষ্টা করছি (তবে আমি এটি করতে পারি না, আমার যথেষ্ট খ্যাতি নেই)

— ফ্রাইংগপ্যান্ন

হ্যাঁ, এটি প্রশ্নের উত্তর নয়, উত্তরগুলি প্রয়োগ করার সময় মনে রাখা ভাল। সমস্যাটি হ'ল উত্তরের মন্তব্য বিভাগে ইতিমধ্যে অনেকগুলি রয়েছে, সুতরাং এই টিপটি সমাধিস্থ করা হবে

— ওকার

ঠিক আছে তবে আমি তা জানতাম না

— ফ্রাইংজিপ্যান্ন