কেন আমরা ফন্ট-মুখের মধ্যে ttf, eot, woff, svg… অন্তর্ভুক্ত করব


299

ইন সিএসএস 3 font-face , সেখানে একাধিক ফন্ট ধরনের মত অন্তর্ভুক্ত করা হয়েছে ttf, eot, woff, svgএবং cff

কেন এই ধরণের সমস্ত ব্যবহার করা উচিত?

যদি তারা বিভিন্ন ব্রাউজারে বিশেষ হয় তবে তাদের সংখ্যা বড় ওয়েব ব্রাউজারের সংখ্যার চেয়ে কেন বেশি?

উত্তর:


425

2019 সালে উত্তর:

কেবল ডাব্লুওএফএফ 2 ব্যবহার করুন বা আপনার যদি লিগ্যাসি সমর্থন প্রয়োজন হয় তবে ডাব্লুওএফএফ। অন্য কোনও ফর্ম্যাট ব্যবহার করবেন না

( svgএবং eotমৃত ফর্ম্যাটগুলি, ttfএবং otfসম্পূর্ণ সিস্টেম ফন্টগুলি হয় এবং ওয়েব উদ্দেশ্যে ব্যবহার করা উচিত নয়)

2012 থেকে আসল উত্তর:

সংক্ষেপে, হরফ-মুখটি খুব পুরানো তবে সম্প্রতি ই-র চেয়ে বেশি সমর্থিত।

  • eot ইন্টারনেট এক্সপ্লোরারদের জন্য প্রয়োজনীয় যা আই 9 এর চেয়ে পুরনো - তারা নকশাটি আবিষ্কার করেছিল, তবে eot ছিল মালিকানাধীন সমাধান।

  • ttfএবং otfএটি সাধারণ পুরানো ফন্ট, তাই কিছু লোক বিরক্ত হয়েছিল যে এর অর্থ যে কেউ বিনামূল্যে ব্যয়বহুল থেকে লাইসেন্স ফন্টগুলি ডাউনলোড করতে পারে।

  • সময় কেটে যায়, এসভিজি ১.১ একটি "ফন্ট" অধ্যায় যুক্ত করে যা ব্যাখ্যা করে যে কীভাবে কোনও ফন্টকে বিশুদ্ধভাবে এসভিজি মার্কআপ ব্যবহার করে মডেল করা যায় এবং লোকেরা এটি ব্যবহার শুরু করে। আরও সময় কেটে যায় এবং দেখা যাচ্ছে যে তারা কেবলমাত্র একটি সাধারণ ফন্টের ফর্ম্যাটের তুলনায় একেবারে ভয়ানক , এবং এসভিজি 2 বুদ্ধি করে পুরো অধ্যায়টিকে আবার সরিয়ে দেয়।

  • তারপরে, woffডোমেন জ্ঞানের একটি বিট লোকের দ্বারা উদ্ভাবিত হয়, যা ফন্টগুলি এমনভাবে হোস্ট করা সম্ভব করে তোলে যেগুলি সিস্টেম ইনস্টলের জন্য সমালোচনামূলকভাবে গুরুত্বপূর্ণ বিটগুলি ফেলে দেয়, তবে ওয়েবের জন্য অপ্রাসঙ্গিক (মানুষকে জলদস্যু সম্পর্কে খুশি করে তোলে) এবং অভ্যন্তরীণ সংকোচনের জন্য ওয়েবে প্রয়োজনীয়তার সাথে আরও ভাল মানিয়ে যায় (ব্যবহারকারী এবং হোস্টকে খুশি করে)। এটি পছন্দসই বিন্যাসে পরিণত হয়।

  • 2019 সম্পাদনা কয়েক বছর পরে, woff2খসড়া তৈরি এবং গ্রহণযোগ্য হয়, যা সংক্ষেপণের উন্নতি করে, এমনকি "ছোট ছোট ফাইলগুলিতে" অংশে "একক ফন্ট লোড করার ক্ষমতা সহ, যাতে 20 স্ক্রিপ্টগুলিকে সমর্থন করে এমন একটি ফন্ট" খণ্ড হিসাবে সংরক্ষণ করা যায় "পরিবর্তে ডিস্কে, ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে পুরো অংশটি ফন্টকে সামনে স্থানান্তরিত করার পরিবর্তে" টাইপসেটেটিং অভিজ্ঞতার উন্নতি করার পরিবর্তে "অংশগুলিতে" ফন্টটি লোড করতে সক্ষম করে।

আপনি যদি আই 8 এবং নিম্ন, এবং আইওএস 4 এবং নিম্ন এবং অ্যান্ড্রয়েড 4.3 বা তার আগে সমর্থন করতে না চান তবে আপনি কেবল নতুন ব্রাউজারগুলিকে সমর্থন করে ডাব্লুওএফএফ (এবং ডাব্লুওএফএফ 2, আরও উচ্চতর সংকুচিত ডাব্লুএফএফ) ব্যবহার করতে পারেন)

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

জন্য সমর্থন http://caniuse.com/woffwoff এ চেক করা যেতে পারে এর জন্য সমর্থন http://caniuse.com/woff2 এ চেক করা যায়
woff2


8
আইওএস 5 ডাব্লুওএফএফ সমর্থন করে।
রব

70
woff... এমন একটি মোড আছে যা লোকেরা ফন্টটি ছিটিয়ে থাকা বন্ধ করে দেয় ? পৃথিবীতে কীভাবে এটি কাজ করতে পারে / করতে পারে?
মার্ক অ্যামেরি

12
টিটিএফ ডাব্লুওএফএফের চেয়ে হালকা হওয়া উচিত নয়। ডাব্লুএফএফ হ'ল ট্রু টাইপ - ওপেনটাইপ ফন্ট (টিটিএফ এবং ওটিএফ) এর সংকীর্ণ রূপ।
টোটো_টিকো

7
ডাব্লুওএফএফের বিষয়টি জলদস্যুতা বিরোধী নয়। টাইপকিট বলেছে, "ওপেনটাইপ / সিএফএফ ফন্টের দুটি প্রধান সুবিধা হ'ল ট্রুটাইপ ফন্টগুলির চেয়ে বেশি 1) তাদের ছোট ফাইলের আকার, এবং 2) পরিবেশে ভালভাবে রেন্ডার করার জন্য তাদের তুলনায় কম হিন্টিং তথ্য প্রয়োজন যা কিছু ফর্ম অ্যান্টি-এলিয়াসিংয়ের অনুমতি দেয়। "
মাইকেল ম্যাকগিনিস

8
@ জেলফায়ার সরঞ্জামগুলি সেই পতাকাটির সাথে এম্বেডযোগ্য ফন্টগুলি তৈরি করা শক্ত করে তোলে এবং আপনার রান-অফ-মিল-ডিজাইনার প্রোগ্রামিং-অশিক্ষিত এবং যদি কেউ চকচকে "পাইরেট ফন্ট" বোতামের সাহায্যে ম্যাক অ্যাপ্লিকেশনটি ডিজাইন করেন তবে পতাকাটি সরাতে পারে। তদুপরি, যদি তারা কর্পোরেশন হয় তবে আপনি আইনী চার্জ আনতে পারেন। যদি তারা কোনও ব্লগের সাথে কিছু লোক হয় তবে তাদের সাথে কথা বলুন, এটির ব্যর্থতা, তাদের হোস্ট ইত্যাদি - তবে মনে রাখবেন যে লোকেরা আপনার ফন্ট কিনতে পারেন না তারা কোনওভাবেই কস্টুমার নন, তাই আমি বলতে পারি যে মুক্ত প্রচার আরও মূল্যবান এটিকে কেবল ড্যাফোন্টের নিকটতম জিনিসের জন্য অদলবদল করতে তাদের বোঝানোর ঝামেলা ছাড়াই।
ক্যামিলো মার্টিন

21

ওয়াফ ট্রু টাইপ - ওপেনটাইপ ফন্টের একটি সংকুচিত (জিপড) ফর্ম। এটি ছোট এবং গ্রাফিক ফাইলের মতো নেটওয়ার্কের মাধ্যমেও সরবরাহ করা যেতে পারে। সর্বাধিক গুরুত্বপূর্ণভাবে, এই ফন্টটি রেন্ডারিং রুল টেবিলগুলি সহ পুরোপুরি সংরক্ষণ করা হয় যা খুব কম লোকই যত্ন করে কারণ তারা কেবল লাতিন স্ক্রিপ্ট ব্যবহার করে।

[মৃত ইউআরএল সরানো] একবার দেখুন। আপনি যে ফন্টটি দেখছেন তা হ'ল একটি পরীক্ষামূলক ওয়েব বিতরণ করা স্মার্টফন্ট (ডাব্লুউফ) যা হাজার হাজার সম্মিলিত অক্ষর জটিল আকার তৈরি করে। অন্তর্নিহিত পাঠ্যটি রোমানাইজড সিংহলার ল্যাটিন কোড simple (নোটপ্যাডে অনুলিপি করুন এবং দেখুন)

কেবল ওয়াফটি এটি করতে পারে কারণ কারও কাছে এই ফন্ট নেই এবং এখনও এটি কোথাও দেখা যায় না (ম্যাক, উইন, লিনাক্স এবং এমনকি স্মার্টফোনগুলিতে আইই ব্যতীত অন্য ব্রাউজারগুলির দ্বারা। আই ওপেন প্রকারের সম্পূর্ণ সমর্থন নেই)।


3
আমি সেই ওয়েবসাইটে বিশেষ কিছু দেখতে পাচ্ছি না। যদি আমি এটিকে কোনও সম্পাদক এ অনুলিপি করি (utf8 সমর্থন আছে) আমি এখনও কেবলমাত্র সাধারণ পাঠ্য দেখতে পাচ্ছি। এটা কি woff ঠিক কি?
জেলফির কালটসটহল

4
এই উত্তরের দুই-তৃতীয়াংশ হয় ভুল বা অপ্রাসঙ্গিক। এছাড়াও সেই লিঙ্কটি নষ্ট হয়ে গেছে।
Yay295

12

ব্রোটলি সংক্ষেপণ অ্যালগরিদম এবং ডাব্লুএইউএফএফ ১.০ এর তুলনায় অন্যান্য উন্নতির উপর ভিত্তি করে ডাব্লুএইউএফএফ ২.০, Chrome, অপেরা এবং ফায়ারফক্সে সমর্থিত।

http://en.wikedia.org/wiki/Web_Open_Font_ Format http://en.wikedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfouts/ এ কীভাবে ব্যবহার করবেন সে সম্পর্কে একটি উদাহরণ রয়েছে।

মূলত আপনি woff2 ফাইলে একটি src URL যুক্ত করুন এবং woff2 ফর্ম্যাটটি নির্দিষ্ট করুন। ওয়াফ-ফর্ম্যাটটির আগে এটি থাকা গুরুত্বপূর্ণ: ব্রাউজারটি এটি সমর্থন করে এমন প্রথম ফর্ম্যাটটি ব্যবহার করবে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.