সিএসএস ব্যবহার করে কাস্টম ফন্ট ব্যবহার করছেন?

Question

আমি কিছু নতুন ওয়েবসাইট দেখেছি যা তাদের সাইটে কাস্টম ফন্ট ব্যবহার করছে (নিয়মিত আড়িয়াল, তাহোমা ইত্যাদি)।

এবং তারা দুর্দান্ত পরিমাণ ব্রাউজার সমর্থন করে।

এক যে কিভাবে কাজ করে? লোকেরা যদি সম্ভব হয় তবে ফন্টটি ডাউনলোড করতে ফ্রি অ্যাক্সেস থেকে বাধা দেয়।

Comments

জাভাস্ক্রিপ্ট প্রতিস্থাপন যেমনcufon

— tq

foutsquirrel.com , google.com/webfouts , ইত্যাদি

— j08691

Answer 1

সাধারণভাবে, আপনি আপনার সিএসএসে একটি কাস্টম ফন্ট ব্যবহার করতে পারেন @font-face। এখানে একটি খুব মৌলিক উদাহরণ:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

তারপরে, তুচ্ছভাবে নির্দিষ্ট উপাদানটিতে ফন্ট ব্যবহার করতে:

.classname {
    font-family: 'YourFontName';
}

( .classnameআপনার নির্বাচক)।

নোট করুন যে নির্দিষ্ট ফন্ট-ফর্ম্যাটগুলি সমস্ত ব্রাউজারে কাজ করে না; রূপান্তরিত করার অত্যধিক প্রচেষ্টা এড়াতে আপনি ফন্টসকিয়ারেল ডট কম এর জেনারেটর ব্যবহার করতে পারেন ।

গুগল ফন্ট দ্বারা সরবরাহিত ফ্রি ওয়েব-ফন্টগুলির একটি দুর্দান্ত সেট আপনি খুঁজে পেতে পারেন (এছাড়াও স্বয়ংক্রিয়ভাবে উত্পাদিত সিএসএস @font-faceবিধি রয়েছে, সুতরাং আপনাকে নিজের লেখার দরকার নেই)।

লোকেরা যদি সম্ভব হয় তবে ফন্টটি ডাউনলোড করতে ফ্রি অ্যাক্সেস করতে বাধা দেয়

নাহ, আপনার পাঠ্যটি CSS এর মাধ্যমে এম্বেড করা কাস্টম ফন্টের সাথে স্টাইল করা সম্ভব নয়, যখন লোকেরা এটি ডাউনলোড করা থেকে বিরত থাকে। আপনার ছবি, ফ্ল্যাশ বা এইচটিএমএল 5 ক্যানভাস ব্যবহার করা দরকার, এগুলি সমস্ত ব্যবহারিক নয়।

আমি আশা করি যে সাহায্য!

Comments

দুর্দান্ত বিস্তারিত উত্তরের জন্য আপনাকে ধন্যবাদ। আমি জিজ্ঞাসা করতে পারি যে এই ধরণের পদ্ধতির কাজটি পুরানো ব্রাউজারগুলির জন্যও কাজ করে? যেমন .. আইই 8/7/6? এবং যাইহোক, গুগল ওয়েবফন্টে প্রদর্শিত সমস্ত ফন্ট বাণিজ্যিক ব্যবহারের জন্য বিনামূল্যে?

— Radicate

@ ডন @font-faceসমস্ত যুক্তিসঙ্গতভাবে নতুন ব্রাউজারগুলির সাথে কাজ করে তবে আপনার সঠিক ফর্ম্যাটগুলি থাকা দরকার; এজন্য রূপান্তর এবং নিয়ম-উত্পন্নকরণের প্রক্রিয়াটি স্বয়ংক্রিয় করতে আমি ফন্টসকিয়ারেল ডট কম ব্যবহার করার পরামর্শ দিয়েছি। এবং হ্যাঁ, গুগল ওয়েবফন্টগুলি বাণিজ্যিক ব্যবহারের জন্য বিনামূল্যে ( আরও তথ্যের জন্য ছোট লিঙ্ক )।

— ক্রিস

@Chris, বাদ নেই font-style:এবং font-weight:আপনার @font-faceঘোষণা কোনো মান লঙ্ঘনের?

— পেসিয়ার 3

এটি কাজ করতে আমাকে format('truetype')উত্স URL এবং এর মধ্যে যুক্ত করতে হয়েছিল ;।

— ক্যালকুলেটরলাইন

হ্যালো ক্রিস আপনি কীভাবে এই ফন্টটি ব্যবহার করবেন জানেন? foutsmarket.com/font-download/gothic-821-condensed-bt

— বিল্লাল বেগেরাদজ

Answer 2

আপনার ফন্টটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ কিনা তা নিশ্চিত করতে আপনি এই বাক্য গঠনটি ব্যবহার করেছেন তা নিশ্চিত করুন:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

এখান থেকে নেওয়া হয়েছে ।

Answer 3

আপনাকে ফন্ট ফাইলটি ডাউনলোড করতে হবে এবং এটি আপনার সিএসএসে লোড করতে হবে।

Fe আমি আমার ওয়েব অ্যাপ্লিকেশনটিতে ইয়ানোন কাফিস্যাটজ ফন্টটি ব্যবহার করছি ।

আমি লোড এবং মাধ্যমে এটি ব্যবহার

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

আমার স্টাইলশিটে

Answer 4

ওয়েবে আজ ব্যবহারের জন্য ফন্টের চারটি ফর্ম্যাট রয়েছে: EOT, TTF, WOFF,এবংWOFF2.

দুর্ভাগ্যক্রমে, বিস্তৃত পছন্দ সত্ত্বেও, কোনও একক সর্বজনীন ফর্ম্যাট নেই যা সমস্ত পুরানো এবং নতুন ব্রাউজারগুলিতে কাজ করে:

• EOT শুধুমাত্র আইই,
• টিটিএফের আংশিক IE সমর্থন রয়েছে,
• ডাব্লুএফএফ আরও বিস্তৃত সমর্থন উপভোগ করেছে তবে কিছু পুরানো ব্রাউজারগুলিতে পাওয়া যায় না
• ডাব্লুওএফএফ 2.0 সমর্থন অনেক ব্রাউজারের জন্য কাজ চলছে progress

আপনি যদি চান যে আপনার ওয়েব অ্যাপ্লিকেশনটিতে সমস্ত ব্রাউজারে একই ফন্ট রয়েছে তবে আপনি সিএসএসে সমস্ত 4 ফন্ট প্রকার সরবরাহ করতে চাইতে পারেন

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Comments

হাই হিতেশ আমি জিজ্ঞাসা করতে পারি এর ব্যবহার কি #iefix? এবং এই অংশটি font-family: 'besom'; !important, !importantবাহিরে আছে ;?

— জোনজি

Answer 5

আপনি যদি গুগল.com/webfouts বা foutsquirrel.com থেকে আপনার পছন্দসই ফন্টগুলি খুঁজে না পান তবে আপনি নিজের তৈরি ফন্টের সাহায্যে সর্বদা নিজের ওয়েব ফন্ট তৈরি করতে পারেন।

এখানে একটি সুন্দর টিউটোরিয়াল: আপনার নিজের ফন্ট ফেস ওয়েব ফন্ট কিট করুন

যদিও আপনার ফন্টটি ডাউনলোড করতে কাউকে বাধা দেওয়ার বিষয়ে নিশ্চিত নই।

আশাকরি এটা সাহায্য করবে,

Answer 6

CUFON নামে একটি আকর্ষণীয় সরঞ্জাম রয়েছে । এটি এই ব্লগটিতে কীভাবে ব্যবহার করা যায় তার একটি প্রদর্শন আছে যা সত্যই সহজ এবং আকর্ষণীয়। এছাড়াও, এটি উত্পন্ন সামগ্রীটি লোকেদের ctrl + c / ctrl + v করতে দেয় না।

Answer 7

আমি উইন 8 এ কাজ করছি, এই কোডটি ব্যবহার করুন। এটি আইআই এবং এফএফ, অপেরা ইত্যাদির জন্য কাজ করে যা আমি বুঝতে পেরেছি তা হল: গুগল ফন্টে ওয়াফ ফন্ট হালকা এবং সাধারণ।

আপনার টিটিএফ ফন্টটি আগে woff এ রূপান্তর করতে এখানে যান ।

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Answer 8

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

তবে আপনি যদি নিজের ওয়েবসাইটে কোনও ফন্ট প্রয়োগ করতে চান তবে এটি পড়ুন: আপনার ওয়েবসাইটে ফন্টগুলি প্রয়োগ করার জন্য একটি দুর্দান্ত সহজ এবং নিখরচায় উপায় রয়েছে। আমি গুগল ফন্টগুলির সুপারিশ করব কারণ এটি নিখরচায় এবং সহজেই ব্যবহারযোগ্য। উদাহরণস্বরূপ, আমি Google থেকে bangers ফন্ট ব্যবহার করব (। Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) এই মত দেখাবে কিভাবে হল: এইচটিএমএল

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

সিএসএস

body {
font-family: 'Bangers', cursive;
}