CSS ব্যবহার করে একটি ফন্ট .tf কীভাবে অন্তর্ভুক্ত করবেন?

Question

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

আমার সাধারণ কোডটি এখানে:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline
} 

আমি জানি না আমি কোথায় ভুল করেছি। আপনি আমাকে এই ব্যাপারে সাহায্য করতে পারেন? ধন্যবাদ।

Comments

ফন্টটি সঠিকভাবে লোড হয়েছে তা নিশ্চিত করার জন্য আপনি কি আপনার ব্রাউজারের কনসোলে নেটওয়ার্ক ট্যাবটি পরীক্ষা করতে পারেন?

— rink.attendant.6

থেকে woff পান এখানে

— জনাব এলিয়েন

আপনি কি ফন্ট ফাইলের নামটি সঠিকভাবে বানান করেছেন তা নিশ্চিত? এটা করা উচিত নয় oswald.regular.ttf?

হ্যাঁ আমি আমার ফন্টের নামটি ডাবল চেক করেছি

— জেরিয়েল

@ জেরিলে তাই আপনার কাছে একটি এক্সটেনশন সহ একটি টিটিএফ ফন্ট আছে tff? আপনি কি সত্যিই সে সম্পর্কে নিশ্চিত?

Answer 1

ক্রস ব্রাউজার সমর্থনের জন্য কেবল ওয়েবফন্টের জন্য .ttf ফাইল সরবরাহ করা যথেষ্ট ভাল হবে না। বর্তমানে সর্বোত্তম সম্ভাব্য সংমিশ্রণটি এই সংমিশ্রণটি ব্যবহার করছে:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

এই কোডটি আপনার ওয়েবফন্টের জন্য .eot, .woff, .ttf এবং svg ফর্ম্যাট ধারণ করে। এই সমস্ত প্রক্রিয়াটি স্বয়ংক্রিয় করতে, আপনি ব্যবহার করতে পারেন: Transfonter.org ।

এছাড়াও, আধুনিক ব্রাউজারগুলি। ওফফ্ট ফন্টের দিকে সরে যাচ্ছে, তাই আপনি সম্ভবত এটিও করতে পারেন:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
   url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}  

এখানে আরও পড়ুন: http://css-tricks.com/snippets/css/used-font-face/

---

ব্রাউজার সমর্থন সন্ধান করুন: আমি ফন্টফেস ব্যবহার করতে পারি?

Comments

এবং খুঁজে বার করো আপনি GFonts ব্যবহার করছেন stackoverflow.com/a/30585464/1727470

— Samy Bencherif

পাথ ফরওয়ার্ড স্ল্যাশ সঙ্গে আছে - আমার মত যারা সহজে বিভ্রান্ত পানurl('path/to/font.woff')

— wunth

ফন্ট-মুখের নিয়মে মন্তব্য সহ আমার একটি সমস্যা ছিল। নিয়মের শেষে মন্তব্যগুলি সরানো সমস্যার সমাধান করে।

— এরিক ডি সুজা

আমি দেখতে পেয়েছি যে আমি যে ফন্টটির জন্য একটি ওয়েব ফন্ট তৈরি করতে চেয়েছিলাম তা ফন্ট কাঠবিড়ালি থেকে কালো তালিকাভুক্ত। যাইহোক, transfonter.org আমার পক্ষে কাজ করেছিল।

— হটএন

ফন্ট কাঠবিড়ালি নিয়েও আমার সমস্যা ছিল। হরফ

— পিটার হেম্যান

Answer 2

আপনি কি ফর্ম্যাট চেষ্টা করেছেন?

@font-face {
  font-family: 'The name of the Font Family Here';
  src: URL('font.ttf') format('truetype');
}

এই নিবন্ধটি পড়ুন: http://css-tricks.com/snippets/css/used-font-face/

এছাড়াও, ব্রাউজারের উপরও নির্ভর করে।

Answer 3

আপনি ফন্টের মুখটি এভাবে ব্যবহার করতে পারেন:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}

Answer 4

আমি জানি এটি একটি পুরানো পোস্ট তবে এটি আমার সমস্যার সমাধান করেছে।

@font-face{
  font-family: "Font Name";
  src: url("../fonts/font-name.ttf") format("truetype");
}

লক্ষ্য করুন src:url("../fonts/font-name.ttf");আমরা রুট ডিরেক্টরিতে ফিরে যেতে এবং তারপরে হরফ ফোল্ডারে বা আপনার ফাইল যেখানেই থাকি সেখানে দুটি পিরিয়ড ব্যবহার করি।

আশা করি এটি কাউকে লাইনের নীচে সহায়তা করবে :) শুভ কোডিং