আমি কীভাবে কোনও HTML সাইটে একটি কাস্টম ফন্ট ইনস্টল করব

153

আমি ফ্ল্যাশ বা পিএইচপি ব্যবহার করছি না - এবং আমাকে একটি সাধারণ HTML লেআউটে একটি কাস্টম ফন্ট যুক্ত করতে বলা হয়েছে। "কেজি জুন বাগ"

আমি এটি স্থানীয়ভাবে ডাউনলোড করেছি - এটি সাধন করার জন্য কি কোনও সাধারণ সিএসএস কৌশল আছে?

— আদম
সূত্র

276

হ্যাঁ, আপনি @ ফন্ট-ফেস নামের সিএসএস বৈশিষ্ট্যটি ব্যবহার করতে পারেন। এটি কেবলমাত্র সিএসএস 3 তে আনুষ্ঠানিকভাবে অনুমোদিত হয়েছে, তবে সিএসএস 2 এ প্রস্তাবিত এবং প্রয়োগ করা হয়েছে এবং আইইতে বেশ দীর্ঘ সময়ের জন্য সমর্থন করা হয়েছে।

আপনি এটি সিএসএসে এটি ঘোষণা করুন:

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

তারপরে, আপনি অন্যান্য স্ট্যান্ডার্ড ফন্টগুলির মতোই এটি উল্লেখ করতে পারেন:

 h3 { font-family: Delicious, sans-serif; }

সুতরাং, এই ক্ষেত্রে,

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

এবং আপনাকে কেবল এইচটিএমএল ফাইলের মতো একই জায়গায় JUNEBUG.TFF লাগাতে হবে।

আমি dafont.com ওয়েবসাইট থেকে ফন্টটি ডাউনলোড করেছি :

http://www.dafont.com/junebug.font

— নিকোলাস মডরিজেক
সূত্র

1

দুঃখিত, যদি এটি "হোমওয়ার্ক" হয় তবে কোডটি কেমন দেখাচ্ছে যদি আমি এই সাধারণ জুন্টবুগ ফন্টটি কেবল সরল পাঠ্যের জন্য ব্যবহার করি

— অ্যাডাম

আমি জানতাম না যে আপনি এটি করতে পারবেন। এটি অন্যান্য ব্রাউজারগুলিতেও কাজ করে?

— জুলিয়েন বোর্ডন

1

: কোন শালীন ব্রাউজারে কাজ করে webfonts.info/wiki/index.php?title=@font-face_browser_support

— নিকোলাস Modrzyk

আমার জন্য কাজ করে না, আমার ফন্টটি আমার পিএইচপি পৃষ্ঠা হিসাবে একই ফোল্ডারে রয়েছে।

— কালো

1

আপনার ব্লগ পাথটি নির্দিষ্ট urlকরা যেখানে আপনার সিএসএস ফাইল রয়েছে তার সাথে সম্পর্কিত।

— অ্যালেক্স Semeniuk

17

সর্বোত্তম সম্ভাব্য ব্রাউজার সমর্থনের জন্য আপনার সিএসএস কোডটি দেখতে এমন হওয়া উচিত:

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

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

আরও তথ্যের জন্য, CSS- ট্রিক্স ডটকম এ @ ফন্ট-ফেস ব্যবহার করে নিবন্ধটি দেখুন ।

— জন স্লেজার্স
সূত্র

17

আপনি বেশিরভাগ আধুনিক ব্রাউজারে @ ফন্ট-ফেস ব্যবহার করতে পারেন।

এটি কীভাবে কাজ করে সে সম্পর্কে এখানে কিছু নিবন্ধ রয়েছে:

আপনার অ্যাপটিতে ফন্ট যুক্ত করার জন্য এখানে একটি ভাল বাক্য গঠন রয়েছে:

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

@ ফন্ট-ফেস এর সাহায্যে ফন্টকে রূপান্তর করতে এখানে বেশ কয়েকটি জায়গা রয়েছে:

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

http://cufon.shoqolate.com/generate/

— nheinrich
সূত্র

9

এটা চেষ্টা কর

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

স্নিপেট প্রসারিত করুন

vilis.org

— SIAMWEBSITE
সূত্র

4

আপনি যদি কোনও বাহ্যিক স্টাইল শীট ব্যবহার করেন তবে কোডটি এর মতো দেখতে পারে:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

এবং একটি পৃথক .css ফাইলে সংরক্ষণ করা উচিত (উদাঃ স্টাইলস। সিএসএস)। যদি আপনার .css ফাইলটি পৃষ্ঠার কোড থেকে পৃথক কোনও স্থানে থাকে তবে প্রকৃত ফন্ট ফাইলে .css ফাইলের মতো একই পথ থাকা উচিত, .html বা। Php ওয়েব পৃষ্ঠা ফাইল নয়। তারপরে ওয়েব পৃষ্ঠার জন্য এমন কিছু দরকার:

<link rel="stylesheet" href="css/styles.css">

আপনার এইচটিএমএল পৃষ্ঠার <হেড> বিভাগে। এই উদাহরণে, ফন্ট ফাইলটি স্টাইলশিটের পাশাপাশি CSS ফোল্ডারে থাকা উচিত। এর পরে, সেই উপাদানটিতে জুনবার্গ ফন্ট ব্যবহার করতে আপনার এইচটিএমএল এর যে কোনও ট্যাগের ভিতরে ক্লাস = "জুনবাগ" যুক্ত করুন।

আপনি যদি সত্যিকারের ওয়েব পৃষ্ঠায় সিএসএস রাখছেন তবে এইচটিএমএল এর মাথায় স্টাইল ট্যাগ যুক্ত করুন:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

এবং প্রকৃত উপাদান শৈলী হয় উপরের মধ্যে অন্তর্ভুক্ত করা যেতে পারে <style>এবং শ্রেণি বা আইডি দ্বারা উপাদান অনুসারে বলা যেতে পারে, বা আপনি উপাদানটির সাথে শৈলীর ইনলাইনটি ঘোষণা করতে পারেন। এলিমেন্টের দ্বারা আমি <ডিভ>, <পি>, <এইচ 1> বা এইচটিএমএল এর মধ্যে অন্য কোনও উপাদান যা জুনবুগ ফন্ট ব্যবহার করা প্রয়োজন। এই উভয় বিকল্পের সাথে, ফন্ট ফাইল (জুনবগ.টিটিএফ) এইচটিএমএল পৃষ্ঠার মতো একই পথে অবস্থিত হওয়া উচিত। এই দুটি বিকল্পের মধ্যে সেরা অনুশীলনটি দেখতে পাবেন:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

এবং

<h1 class="junebug">This is Junebug</h1>

এবং সর্বনিম্ন গ্রহণযোগ্য উপায় হ'ল:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

এবং

<h1 style="font-family: Junebug;">This is Junebug</h1>

ইনলাইন শৈলীগুলি ব্যবহার করা ভাল না হওয়ার কারণটি সর্বোত্তম অনুশীলন হ'ল শৈলীগুলি এক জায়গায় রাখা উচিত তাই সম্পাদনাটি ব্যবহারিক। এটি বাহ্যিক স্টাইল শিট ব্যবহারের প্রথম বিকল্পটি ব্যবহার করার প্রস্তাব দেওয়ার মূল কারণটিও। আশা করি এটা কাজে লাগবে.

— রিচার্ড স্টিটজ
সূত্র

-1

এটি করার একটি সহজ উপায় রয়েছে: এইচটিএমএল ফাইলটিতে যুক্ত করুন:

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

দ্রষ্টব্য: আপনি নিজের কাছে .tf ফাইলটির নাম রেখেছেন। তারপরে আপনার সিএসএস ফাইলে যান এবং যুক্ত করুন:

h1 {
    color: blue;
    font-family: vermin vibes;
}

দ্রষ্টব্য: আপনি যে ফন্টটি রেখেছেন তার ফন্টের নাম রাখুন।

দ্রষ্টব্য: ফন্ট-পরিবারের নামটি আপনার ফন্ট হিসাবে লিখবেন না tt "-, _" ... ইত্যাদি হিসাবে এটিতে কেবল স্থান থাকতে পারে।

— আব্বাস শরারা
সূত্র

আপনার font-faceটিটিএফ ফাইলের পরিবর্তে এটি সিএসএস হিসাবে সত্যই সংজ্ঞায়িত করা উচিত ।

— আর্কিথ

এটি করার প্রয়োজন হয় না আপনি এটি সহজভাবে এটি করতে পারেন আমি সবসময় এটি দুটি উপায়ে এবং উভয় কাজেই করি

— অ্যাববাস শারার

@ আরক্যাথ ফন্ট-ফেস ব্যবহার করা ভাল কেন?

— আন্তোনিও আরাউজো