ওয়েবফন্ট বা স্থানীয়ভাবে লোড করা ফন্টগুলি?

Question 1

যেহেতু কিউফোন ব্যবহারের ফলে আমি যে সমস্যাগুলি নিয়ে এসেছি তখন থেকেই আমি বাহ্যিক হরফ সংস্থান ব্যবহার থেকে দূরে সরে এসেছি, তবে শেষের দিকে আমি আরও ভাল উপায় আছে কিনা তা দেখার জন্য ফন্ট লোড করার বিকল্প পদ্ধতির সন্ধান করছি; আরও ভাল পদ্ধতিতে নীল থেকে বেরিয়ে আসার উপায় রয়েছে।

সেখানে প্রচুর নতুন পদ্ধতি রয়েছে এবং প্রতিটি পদ্ধতির জন্য এটির বিভিন্নতা দেখা যায়; আমার কি টাইপিকিট ব্যবহার করা উচিত ? অথবা গুগল ওয়েবফন্ট ( জেএস বা সিএসএস সহ)? আমি কি স্থানীয়ভাবে লোডিং ফন্টগুলি ব্যবহার করা চালিয়ে যেতে পারি (উদাঃ foutsquirrel.com উত্পন্ন পদ্ধতি)?

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

এটা কি কেবল পরিস্থিতি এবং প্রয়োজনের বিষয়? যদি তাই হয়, তারা কি?
এই পদ্ধতির মধ্যে কি কঠোর পার্থক্য রয়েছে?
আমি তালিকাভুক্ত না আছে সেখানে কি আরও ভাল পদ্ধতি আছে?
পারফরম্যান্সের জন্য প্রো এর / কনস কী? দেখো? নির্ভরতা? সামঞ্জস্যতা?

আমি সত্যিই এখানে সেরা অনুশীলনগুলির সন্ধান করছি, কর্মক্ষমতা একটি বড় জিনিস তবে এটি স্কেলাবিলিটি এবং সহজেই ব্যবহারযোগ্য। উল্লেখ, চেহারা এবং অনুভূতি না।

গুগল সিএসএস

কেবলমাত্র বাহ্যিক স্টাইলশিট ব্যবহার করে
শুধুমাত্র ক্ষুদ্রতম সামঞ্জস্যপূর্ণ ফাইল প্রকার ব্যবহার করে
ব্যবহার করতে পারেন @importবা <link>বা styleshee (বিষয়বস্তু নেওয়া @font-face) এবং সোজাসুজি আপনার নিজের স্টাইলশীট মধ্যে।

পরীক্ষার ফলাফল

  78ms load of html
  36ms load of css

এখানে চিত্র বর্ণনা লিখুন

গুগল জেএস পদ্ধতি

ব্যবহারসমূহ webfont.jsলোড styleshet করতে
শুধুমাত্র ক্ষুদ্রতম সামঞ্জস্যপূর্ণ ফাইল প্রকার ব্যবহার করে
:rootক্লাস সহ উপাদান সংযোজন
মাথায় স্ক্রিপ্ট যোগ করুন।

পরীক্ষার ফলাফল

    171ms load of html
    176ms load of js
    32ms load of css

এখানে চিত্র বর্ণনা লিখুন

টাইপকিট পদ্ধতি

:rootক্লাস সহ উপাদান সংযোজন ।
*.jsস্নিপেট বা বাহ্যিকভাবে লোড হওয়া ফাইল *.jsফাইল ব্যবহার করতে পারে
data:font/opentypeহরফ ফাইলের পরিবর্তে ব্যবহার করে।
মাথায় স্ক্রিপ্ট যোগ করুন
মাথায় এমবেডড সিএসএস যুক্ত করে
বাহ্যিক স্টাইলশিট মাথায় যুক্ত করে

আপনি সহজেই টাইপকিট ডট কম থেকে ফন্ট এবং লক্ষ্যযুক্ত নির্বাচকগুলিকে যুক্ত / অপসারণ / সামঞ্জস্য করতে পারেন

পরীক্ষার ফলাফল

  169ms load of html
  213ms load of js
  31ms load of css
  3ms load of data:font/

এখানে চিত্র বর্ণনা লিখুন

… এবং ফন্ট কাঠবিড়ালি পদ্ধতি

@font-face{
    font-weight:400;
    font-style:normal;
    font-family:open_sanslight;
    src:url(../font/opensans-light-webfont.eot);
    src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
        url(../font/opensans-light-webfont.woff) format(woff),
        url(../font/opensans-light-webfont.ttf) format(truetype),
        url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}

… বা ডেটা সহ: ফন্ট পদ্ধতি…

@font-face {
    font-family: 'open_sanslight';
    src: url('opensans-light-webfont-f.eot');
}

@font-face {
    font-family: 'open_sanslight';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
         url('opensans-light-webfont-f.ttf') format('truetype'),
         url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

Question 2

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

ফাইল আকারের যুক্তিটিও আমার বিশ্বাস, ফন্ট কাঠবিড়ালি কেন সেভাবে তাদের চেষ্টা করে। তবে তা বেশিরভাগ ক্ষেত্রেই আমার অনুমান।

আপনি যদি এমন পরিবেশে কাজ করছেন যেখানে প্রতিটি অনুরোধ এবং বাইট গণনা করা হয়, আপনার ব্যবহারের ক্ষেত্রে সবচেয়ে ভাল কাজ করে তা খুঁজে বের করার জন্য আপনাকে কিছু প্রোফাইলিং করতে হবে। লোকেরা কি কেবল একটি পৃষ্ঠা দেখছে, এবং আবার কখনও দেখা হবে না? যদি তাই হয় তবে ক্যাশিংয়ের নিয়মগুলি তেমন গুরুত্বপূর্ণ নয়। যদি তারা ব্রাউজ করছে বা ফিরে আসছে, গুগলের কাছে আপনার সার্ভারের চেয়ে আরও ভাল ক্যাশে করার নিয়ম থাকতে পারে। বিলম্বিতা কি আরও বড় সমস্যা, বা ব্যান্ডউইথ? যদি বিলম্ব হয়, কম অনুরোধের জন্য লক্ষ্য করুন, তাই এটি স্থানীয়ভাবে হোস্ট করুন এবং যতটা সম্ভব ফাইলগুলি একত্রিত করুন। ব্যান্ডউইথ যদি হয় তবে যে কোনও বিকল্পের সাথে সবচেয়ে ছোট কোড এবং ক্ষুদ্রতম ফন্ট ফর্ম্যাটটি শেষ হয়।

এখন, সিএসএস বনাম জেএস বিবেচনাতে। আসুন এইচটিএমএলের নীচের অংশটি দেখুন:

<head>
    <script type="text/javascript" src="script1.js"></script>
    <link rel="stylesheet" type="text/css" href="style1.css" />
    <style type="text/css">
        @import url(style2.css);
    </style>
    <script type="text/javascript">
        (function() {
            var wf = document.createElement('script');
            wf.src = 'script2.js';
            wf.type = 'text/javascript';
            wf.async = 'true';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wf, s);
        })();
    </script>
</head>

অনেক ক্ষেত্রে, script1, style1, এবং style2ব্লক করা হবে। এর অর্থ ব্রাউজারটি সেই সংস্থানটি লোড না হওয়া পর্যন্ত দস্তাবেজটি প্রদর্শন করা চালিয়ে যেতে পারে না (যদিও আধুনিক ব্রাউজারগুলি এটি কিছুটা ঝাপ্টা করে)। বিশেষত স্টাইলশীট সহ যা আসলে ভাল জিনিস হতে পারে। এটি আনস্টাইলযুক্ত সামগ্রীর ফ্ল্যাশকে বাধা দেয় এবং এটি স্টাইলগুলি প্রয়োগ করার সময় ঘটে যাওয়া দৈত্যাকার শিফটটিকেও প্রতিরোধ করে (এবং সামগ্রীটি স্থানান্তরিত করে ব্যবহারকারী হিসাবে সত্যই বিরক্তিকর)।

অন্যদিকে, script2ব্লক করা হবে না। এটি পরে লোড করা যেতে পারে এবং ব্রাউজারটি বাকী নথিকে বিশ্লেষণ এবং প্রদর্শনের দিকে এগিয়ে যেতে পারে। যাতে এটিও উপকারী হতে পারে।

বিশেষত ফন্টগুলির বিষয়ে কথা বলা (এবং আরও সুনির্দিষ্টভাবে গুগলের অফার), আমি সম্ভবত একটি সিএসএস পদ্ধতি অবলম্বন করব (আমার পছন্দ @importকারণ এটি স্টাইলশিটের সাথে স্টাইল রাখে, তবে এটি কেবল আমার হতে পারে)। স্ক্রিপ্ট দ্বারা লোড করা জেএস ফাইলটি ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) @font-faceঘোষণার চেয়ে বড় এবং আরও অনেক বেশি কাজের মতো দেখায় । এবং আমি বিশ্বাস করি না যে আসল ফন্টটি নিজেই লোড করা (ডাব্লুএফএফএফ বা টিটিএফ) ব্লক করছে, সুতরাং এটি জিনিসগুলিকে খুব বেশি বিলম্বিত করা উচিত নয়। আমি ব্যক্তিগতভাবে সিডিএনগুলির বিশাল অনুরাগী নই, তবে আসল বিষয়টি হ'ল তারা আসলেই দ্রুত। গুগলের সার্ভারগুলি বেশিরভাগ ভাগ করা হোস্টিং পরিকল্পনাগুলিকে ভূমিধসের দ্বারা পরাজিত করবে এবং তাদের ফন্টগুলি এত জনপ্রিয় হওয়ায় লোকেরা তাদের ইতিমধ্যে ক্যাশে রেখেছে।

এবং এটাই আমি পেয়েছি।

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

Question 3

আমি মনে করি আপনি আপনার প্রশ্নে বোঝার সময়গুলিকে খুব ভালভাবে সম্বোধন করেছেন। আমার দৃষ্টিকোণ থেকে, তালিকায় যুক্ত হওয়া উচিত এমন কয়েকটি উত্স এবং অপশনগুলির পুরো দৃষ্টিভঙ্গি দেখার জন্য আরও কয়েকটি বিবেচনা যা পরীক্ষা করা উচিত।

কিছু অন্যান্য নামী ফন্ট উত্স

মেঘ.টাইপোগ্রাফি

http://www.typography.com/cloud/

আমি যা বলতে পারি তা থেকে, ফন্টগুলি একটি সিএসএস ফাইলে ডেটা হিসাবে এম্বেড করা হয়:

@font-face{ 
    font-family: "Font Name"; 
    src: url(data:application/x-font-woff;base64,d09GRk9UVE8AACSCAA0AAAAARKwAAQAAAAAiVAAAAi4AAAadAAAAAAAAAABDRkYgAAAIyAAAFCgAABmIK5m+CkdERUYAABzwAAAAHQAAACAAXQAER1BPUwAAHRAAAAQlAAAYAq+OkMNHU1VC ... ); 
    font-weight:400; font-style:normal; 
}

এখানে আমার চশমা:

94ms load of css from their server
37ms load of css from our server (will vary based on your configuration)
195ms load of data:fonts from our server (will vary based on your configuration)

এখানে তাদের স্থাপনার খুব উচ্চ-স্তরের বর্ণনা দেওয়া আছে ।

ফন্টস.কম

আমি এই পরিষেবাটি ব্যবহার করি নি, তবে তারা খুব প্রতিষ্ঠিত ফন্ট বিক্রেতা এবং তাদের সাইটে তারা যে তালিকাটি তালিকাভুক্ত করেছে তা বেশ চিত্তাকর্ষক। তাদের সঠিক পদ্ধতিগুলিতে আমার কাছে চশমা নেই, তবে আমি জানি তাদের কাছে কী আছে:

বিশ্বের সর্বাধিক পরিচিত ফন্ট উপলব্ধ
একটি সত্যই বড় ফন্ট গ্রন্থাগার (20,000 এরও বেশি)
মকআপগুলি তৈরি করার জন্য ডেস্কটপ ফন্ট ডাউনলোড
ব্রাউজারে ওয়েব ফন্ট পরীক্ষা করার জন্য একটি কাস্টম সরঞ্জাম
ফাইন টাইপোগ্রাফি নিয়ন্ত্রণ এবং সাবসেটিং
স্ব-হোস্টিং বিকল্পগুলি

ফন্টস্প্রিং

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

প্রসারিত চশমা

প্রতিটি ফন্ট পরিষেবার সামগ্রিক উপকারিতা এবং মতামত হিসাবে, এখানে কয়েকটি তুলনা করা হল:

হরফ লাইব্রেরির আকার

হরফ ডটকম : 20,000+
ফন্টস্প্রিং : 1000+
ফন্টসকিয়ারেল : 300+
গুগল : 600+
টাইপকিট : 900+
টাইপোগ্রাফি.কম (ক্লাউড.টিপোগ্রাফি.কম): সম্ভবত 300+ (35 পরিবার)

মূল্য নির্ধারণ

ফন্টস ডটকম : ৫০০,০০০ পৃষ্ঠা দেখার জন্য / 20 / মাস
ফন্টস্প্রিং : হরফের মাধ্যমে পরিবর্তিত হয় (ফন্টগুলির এক-সময় ক্রয়)
ফন্টসকিয়ারেল : ফ্রি
গুগল : ফ্রি
টাইপকিট : 500,000 পৃষ্ঠা দর্শনের জন্য $ 4 / মাস
টাইপোগ্রাফি.কম : ১,০০,০০০ পৃষ্ঠা দেখার জন্য $ 12.50 / মাস

হরফ মানের

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

হরফ ডটকম : হাই
ফন্টস্প্রিং : উচ্চ থেকে মিশ্রিত
ফন্টসকিয়ারেল : মিশ্রিত
গুগল : মিশ্রিত
টাইপকিট : উচ্চ
টাইপোগ্রাফি ডট কম: খুব উচ্চ (আমি এটি একটি "খুব উচ্চ" উপাধি দিচ্ছি কারণ ফন্টস ডট কম, ফন্টস্প্রিং, এবং টাইপকিট একাধিক ধরণের ফাউন্ড্রি সমর্থন করে, যেখানে এটি এইচএন্ডএফজে ফাউন্ড্রি থেকে শুধুমাত্র ফন্ট, যা বিশ্বের সেরাদের মধ্যে রয়েছে)

হরফ গুণমান দ্বিতীয়: টাইপোগ্রাফি

ডেস্কটপ টাইপোগ্রাফিতে প্রচুর পরিমার্জন রয়েছে যা ওয়েব ফন্টে পাওয়া সত্যিই কঠিন। এর মধ্যে কয়েকটি পরিষেবা সেগুলি সরবরাহ করার উপায় সরবরাহ করে।

ফন্টস ডট কম : কার্নিং, লেটারস্পেসিং, লিগচার, বিকল্প অক্ষর, ভগ্নাংশ ইত্যাদি
ফন্টস্প্রিং : কিছুই নয়
ফন্টসকিয়ারেল : কিছুই নয়
গুগল : কিছুই নেই
টাইপকিট : কিছুই নয়
টাইপোগ্রাফি ডট কম: ছোট ক্যাপস, লিগ্যাচার, বিকল্প অক্ষর, বিকল্প সংখ্যা শৈলী, ভগ্নাংশ ইত্যাদি

ব্রাউজার সমর্থন

এটি বেশিরভাগই প্রতিটি পরিষেবা দ্বারা সমর্থিত ফন্ট ফর্ম্যাটগুলিতে নেমে আসে। প্রধানগুলি হ'ল:

EOT: ইন্টারনেট এক্সপ্লোরার (IE 4+) এর জন্য
ট্রু টাইপ এবং ওপেনটাইপ: প্রথাগত ফর্ম্যাটগুলি (সাফারি ৩.১++, এফএফ 3.5+, অপেরা 10+)
ডাব্লুএফএফ: ওয়েব ফন্টগুলির জন্য নতুন স্ট্যান্ডার্ড (এফএফ 3.6+, ক্রোম 5+)
এসভিজি: আইওএস <4.2

এ সম্পর্কে আরও তথ্য @ ফন্ট-ফেস শাসন ও ব্যবহারোপযোগী ওয়েব ফন্ট ট্রিকস

এই সমস্ত পরিষেবা প্রধান ফন্ট ফর্ম্যাটগুলিকে সমর্থন করে। স্ব-হোস্টেড ফন্টগুলির সাহায্যে যতক্ষণ আপনি সঠিক বাক্য গঠন ব্যবহার করেন ততক্ষণ আপনাকে coveredেকে রাখা উচিত। ফন্টস্প্রিংয়ের বুলেটপ্রুফ সিনট্যাক্সের একটি 2011 আপডেট এখানে রয়েছে :

@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 */
  }

পারফরম্যান্স আমি: ডাউনলোড

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

ফন্টস ডটকম, টাইপকিট, বা টাইপোগ্রাফি ডটকমের মতো অর্থ প্রদত্ত পরিষেবাগুলি সঠিক ফর্ম্যাটটি সনাক্ত করতে এবং তারপরে ডান ফন্ট ফর্ম্যাটটি সরবরাহ করে, প্রায়শই কোনও সিএসএস ফাইলে বেস 6464 ডেটা হিসাবে।

আমি যা দেখতে পাচ্ছি তার থেকে উপরে, আপনি উপরে তালিকাভুক্ত পদ্ধতিগুলির মধ্যে পার্থক্যগুলি উচ্চ-গতির ইন্টারনেট ব্যবহারকারীদের জন্য মোটামুটি নগণ্য (মনে হচ্ছে <200ms পার্থক্য মত) তবে ধীর নেটওয়ার্কগুলির ডিভাইসগুলির জন্য বিবেচনা করা উপযুক্ত, বিশেষত অনাবৃত পৃষ্ঠার হিটগুলির জন্য।

পারফরম্যান্স দ্বিতীয়: সাবসেটিং

আপনি যদি জানেন যে কেবলমাত্র কয়েকটি নির্দিষ্ট অক্ষর আপনি ব্যবহার করতে চান তবে আপনি নিজের ফন্ট অক্ষরের একটি উপসেট দিয়ে তৈরি করতে পারেন এবং এইভাবে ডাউনলোডের আকার হ্রাস করতে পারেন।

ফন্টস ডট কম : খুব বিস্তারিত নিয়ন্ত্রণ
ফন্টস্প্রিং : ফন্টসকিয়ারেল ওয়েবফন্ট জেনারেটরের মাধ্যমে সাবসেট হিসাবে পুনরায় কম্পাইল করতে পারে
FontSquirrel : মাধ্যমে উপবিন্যাস হিসেবে পুনরায় কম্পাইল করতে পারি webfont জেনারেটর
গুগল : খুব বিস্তারিত নিয়ন্ত্রণ
টাইপকিট : "সমস্ত অক্ষর" বা "ডিফল্ট" এর সীমিত বিকল্পসমূহ
টাইপোগ্রাফি.কম : খুব বিস্তারিত নিয়ন্ত্রণ

পারফরম্যান্স তৃতীয়: বিতরণ

ফন্টস ডট কম : গ্লোবাল সিডিএন বা আপনার নিজের সার্ভার
ফন্টস্প্রিং : আপনার সার্ভারের উপর ভিত্তি করে
ফন্টসকিয়ারেল : আপনার সার্ভারের উপর ভিত্তি করে
গুগল : গ্লোবাল সুপার-সিডিএন
টাইপকিট : গ্লোবাল সিডিএন
টাইপোগ্রাফি.কম : গ্লোবাল সিডিএন (125,000 সার্ভার)

ভাষা সহযোগিতা

ফন্টস ডট কম : এশিয়ান এবং মধ্য প্রাচ্য সহ 40 টি ভাষা
ফন্টস্প্রিং : ফন্টের উপর নির্ভর করে ওয়েস্টার্ন
ফন্টসকিয়ারেল : ফন্টের উপর নির্ভর করে ওয়েস্টার্ন
গুগল : ওয়েস্টার্ন, ফন্টের উপর নির্ভর করে
টাইপকিট : ফন্টের উপর নির্ভর করে পশ্চিমা
টাইপোগ্রাফি.কম : ফন্টের উপর নির্ভর করে ওয়েস্টার্ন

পরীক্ষা এবং বাস্তবায়ন

ফন্টস ডট কম : বিস্তৃত এবং অনুকূলিতকরণযোগ্য সরঞ্জাম সহ খুব সহজ
ফন্টস্প্রিং : প্রযুক্তিগত (এটি নিজে করুন)
ফন্টসকিয়ারেল : প্রযুক্তিগত (এটি নিজে করুন)
গুগল : সহজ
টাইপকিট : সহজ
টাইপোগ্রাফি ডটকম : সহজ পরীক্ষা, একবার মোতায়েনের পরে আরও কিছুটা যুক্ত

Question 4

ঠিক আছে, আপনি যেমন পরে আছেন

... এখানে সেরা অনুশীলনগুলির সন্ধান, কর্মক্ষমতা একটি বড় জিনিস তবে এটি স্কেলাবিলিটি এবং সহজেই ব্যবহারযোগ্য। উল্লেখ, চেহারা এবং অনুভূতি না।

উত্তরটি (ওয়েব ডিজাইনে সর্বদা মত): এটি নির্ভর করে!

নিশ্চিতভাবে একটি বিষয় হ'ল আমি জেএস পদ্ধতির ব্যবহারের জন্য সুপারিশ করব না (আপনার দ্বিতীয় উদাহরণে দেখানো হয়েছে)।

ব্যক্তিগতভাবে আমি জাভাস্ক্রিপ্টের উপর নির্ভর করে উপস্থাপিক জিনিস এবং সিএসএস শৈলী তৈরি করা অপছন্দ করি, যদিও বেশিরভাগ ব্যবহারকারীর সক্ষমতা রয়েছে। এটি জিনিসগুলি মেশানো না করার প্রশ্ন।

এবং যেমন আপনি আপনার প্রদত্ত উদাহরণটিতে দেখতে পাচ্ছেন সেখানে এক ধরণের FOUC রয়েছে (আনস্টাইলযুক্ত সামগ্রীগুলির ফ্ল্যাশগুলি), কারণ ফন্টটি উপলব্ধ হওয়ার আগে পৃষ্ঠাটি ইতিমধ্যে ব্রাউজার দ্বারা রেন্ডার করা হয়েছে। যত তাড়াতাড়ি এটি হয়, পৃষ্ঠাটি পুনরায় চিত্রিত করা হয়েছে। এবং সাইটটি যত বড় হবে তার প্রভাব (পারফরম্যান্স)!

সুতরাং আমি ফন্ট এমবেডিংয়ের জন্য কোনও জেএস সমাধান কখনই ব্যবহার করব না।

এখন আসুন খাঁটি সিএসএস পদ্ধতিগুলি দেখে নেওয়া যাক।
বেশ কিছুক্ষণ থেকে এখানে "বনাম @ ইমপোর্ট" সম্পর্কে আলোচনা চলছে। ব্যক্তিগতভাবে আমি @ ইম্পোর্টের ব্যবহার এড়াতে পছন্দ করি এবং সর্বদা <link>কেবল ব্যবহার করি । তবে এটি মূলত ব্যক্তিগত পছন্দগুলির একটি প্রশ্ন। একটি জিনিস যা আপনার কখনই করা উচিত নয় তা হ'ল উভয়কে মিশ্রিত করা!

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

কেন এটি গুরুত্বপূর্ণ, বা একটি ভূমিকা পালন করে?
পারফরম্যান্সের দৃষ্টিকোণ থেকে, আমি আপনার (এক) স্টাইল শীটটিতে এনকোডড ফন্ট বেস 64 অন্তর্ভুক্ত করার পরামর্শ দেব। তবে কেবলমাত্র ওফ ফর্ম্যাটটি, এটি প্রায় সমস্ত আধুনিক ব্রাউজার দ্বারা ব্যবহৃত হয়, যার অর্থ আপনার দর্শকদের সংখ্যাগরিষ্ঠ। অন্যান্য সমস্ত ব্যবহারকারীর জন্য অতিরিক্ত অনুরোধ সহ লাইভ।

তবে বেস6464 এনকোডিং দ্বারা সৃষ্ট "ওভারহেড" এবং একটি ফন্ট ফাইলের আকারের (এমনকি .ওফ ফর্ম্যাটটিতে) এই কৌশলটি কেবলমাত্র তখনই ব্যবহার করা উচিত, যদি আপনার কাছে 3 বা 4 টির বেশি ফন্ট না থাকে। এবং সর্বদা নিশ্চিত হয়ে নিন যে আপনার সার্ভার জিপিপযুক্ত (সিএসএস) ফাইল সরবরাহ করে।

এটি করার বড় সুবিধা হ'ল আপনার কাছে ফন্ট ফাইলের জন্য অতিরিক্ত অনুরোধ নেই। এবং প্রথম পৃষ্ঠার লোডের পরে (আপনার সাইটের কোনও পৃষ্ঠা কোনও বিষয় নয়) সিএসএস ফাইল ক্যাশে হয়েছে। আপনি এইচটিএমএল 5 অ্যাপ্লিকেশন ক্যাশে (যা আপনি অবশ্যই করবেন) ব্যবহার করলে এটিও একটি সুবিধা।

এই সত্যের পাশাপাশি, যে কোনও লেখকের নিজের সাইটে সর্বোচ্চ 3 বা 4 টি বিভিন্ন ফন্ট ব্যবহার করা উচিত নয়, আসুন গুগলের সিডিএন ব্যবহারের পদ্ধতিটি দেখে নেওয়া যাক।

সবার আগে সচেতন হোন যে আপনি (এবং সর্বদা হওয়া উচিত) সমস্ত পছন্দসই ফন্টকে একটি একক মধ্যে অন্তর্ভুক্ত করতে <link>পারেন, যেমন:

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

এর ফলে নিম্নলিখিত প্রতিক্রিয়া হবে:

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

আপনি দেখতে পাচ্ছেন, এখানে 9 টি বিভিন্ন ফন্ট ফাইল রয়েছে যার অর্থ মোট 10 টি (লিঙ্ক উপাদানগুলির মধ্যে একটি সহ) অনুরোধগুলি রয়েছে, যদি ব্যবহারকারীর কাছে অনুরোধ করা ফন্টগুলির এক বা একাধিক লোকাল স্থানীয়ভাবে ইনস্টল না থাকে। এবং এই অনুরোধগুলি আপনার সাইটে প্রতিটি নতুন পৃষ্ঠার অনুরোধে পুনরাবৃত্তি হয় (যদিও আরও কোনও ডেটা স্থানান্তরিত হয় না)! এছাড়াও অনুরোধের প্রতিক্রিয়া <link>কখনই ক্যাশে হয় না।

প্রস্তাবনা:
সর্বোপরি আমি আপনাকে আপনার ফন্ট ফাইল (গুলি) অন্তর্ভুক্ত করার সুপারিশ করব। অবফর্ম ফর্ম্যাট বেস 64 আপনার স্টাইল শীটে এনকোড করা!

এটি কীভাবে করবেন তার উদাহরণ এবং বিবরণের জন্য এই দুর্দান্ত নিবন্ধটি দেখুন !

Question 5

আমি ইনলাইন সিএসএস পদ্ধতিটি ব্যবহার করি কারণ বিস 64৪ টি এনকোডিং করার সময় অতিরিক্ত অনুরোধের ওভারহেড আকার বৃদ্ধির চেয়ে বেশি। এটি আরও সিএসএস ফাইলগুলির সার্ভার দ্বারা গিজিপ সংক্ষেপণের মাধ্যমে অফসেট হয়।

অন্য বিকল্প হ'ল ফন্টগুলির অ্যাসিনক্রোনাস লোডিং ব্যবহার করা হয় তবে বেশিরভাগ ক্ষেত্রে ব্যবহারকারীরা ফন্টগুলি লোডের পরে পপআপ করতে দেখবেন।

পদ্ধতিটি নির্বিশেষে, আপনি যে অক্ষর ব্যবহার করবেন সেগুলি অন্তর্ভুক্ত করে আপনি ফন্ট ফাইলের আকার হ্রাস করতে পারবেন।

Question 6

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

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

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

একটি উপসেট নির্বাচন করা:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

অক্ষরের একটি ব্যাপ্তি নির্বাচন করা:

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

আপনি ফন্ট সরবরাহের সাথে আরও গতি উন্নত করতে dns-prefetch ব্যবহার করতে পারেন ।

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

দীর্ঘ সংক্ষিপ্ত বিবরণ:

যদি মিলি সেকেন্ডের ফন্ট বিতরণটি আপনার সাইটে আঘাত করে তবে উদাহরণস্বরূপ এটি প্রস্তাবিত 1 সেকেন্ডের চেয়ে বেশি লোড করে আমার মনে হয় আপনার সেগুলি নিজেই হোস্ট করা উচিত।

Question 7

সেরা বিকল্প হ'ল এজেন্ট ব্যবহার করে হরফগুলি আমদানি করা, ঠিক যেমন:

<script>
    (function() {
        var font = document.createElement('link'); 
        font.type = 'text/css'; 
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0]; 
        s.parentNode.insertBefore(font, s);
      })();
</script>

আমি এটি আমার ওয়েবপৃষ্ঠায় করি এবং গুগল অন্তর্দৃষ্টি পরীক্ষায় 9 পয়েন্ট বাড়িয়েছি।