উত্তর:
আপনি OTF@ ফন্ট-ফেস লাইক ব্যবহার করে আপনার ফন্টটি প্রয়োগ করতে পারেন:
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path/GraublauWebBold.otf") format("opentype");
}তবে আপনি যদি বিভিন্ন আধুনিক ব্রাউজারগুলিকে সমর্থন করতে চান তবে আমি আপনাকে সন্ধান করতে WOFFএবং TTFফন্টের ধরণের প্রস্তাব দেব । WOFFপ্রকারটি প্রতিটি বড় ডেস্কটপ ব্রাউজার দ্বারা প্রয়োগ করা হয়, তবে TTFপ্রকারটি পুরানো সাফারি, অ্যান্ড্রয়েড এবং আইওএস ব্রাউজারগুলির জন্য একটি ফ্যালব্যাক। যদি আপনার ফন্টটি একটি ফন্ট হ'ল, আপনি উদাহরণস্বরূপ একটি অনলাইনফন্ট কনভার্টার ব্যবহার করে আপনার ফন্টকে রূপান্তর করতে পারেন ।
@font-face {
font-family: GraublauWeb;
src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf") format("truetype");
}আপনি যদি এখনও বাইরে থাকা প্রায় প্রতিটি ব্রাউজারকে সমর্থন করতে চান (আইএমএইচও দরকার নেই) তবে আপনার আরও কিছু ফন্টের প্রকার যেমন:
@font-face {
font-family: GraublauWeb;
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 */
}কেন এই সমস্ত ধরণের প্রয়োগ করা হয় এবং তাদের হ্যাকগুলি এখানে আরও পড়তে পারেন । কোন ব্রাউজারগুলি দ্বারা কোন ফাইল-প্রকারকে সমর্থন করা হয়েছে তার বিশদ দর্শন পেতে, দেখুন:
আশাকরি এটা সাহায্য করবে
"কোডের উদাহরণগুলিতে কোন উদ্ধৃতি ( ) নেই?
থেকে গুগল ফন্ট ডাইরেক্টরি উদাহরণ:
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}এটি .ttf দিয়ে ক্রস ব্রাউজারে কাজ করে, আমি বিশ্বাস করি এটি .otf এর সাথে কাজ করতে পারে। ( উইকিপিডিয়া বলে .otf বেশিরভাগ পিছনে .ttf এর সাথে সামঞ্জস্যপূর্ণ) না হলে আপনি .otf কে .ttf এ রূপান্তর করতে পারবেন
এখানে কয়েকটি ভাল সাইট রয়েছে:
ভাল প্রাইমার:
অন্যান্য তথ্য: