fonts - গুগল ওয়েব ফন্ট লিঙ্ক বা আমদানি সহ?



webfonts google-webfonts (2)

আপনি কিছু অনুরোধ সময় সংরক্ষণ করতে পারেন

... যদি আপনি কিছু অতিরিক্ত কোডিং সময় নিতে।

এটি সত্যিই কোন বড় চুক্তি নয়, Google এর সরলীকৃত এক-লাইন লিঙ্কটি খুলুন:

   http://fonts.googleapis.com/css?family=Kameron:400,700

এবং এটি আপনি কি দেয় তা দেখুন:

/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 400;
  src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Kameron';
  font-style: normal;
  font-weight: 700;
  src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

এখন আসল প্রশ্নের জন্য: @ ইমপোর্ট করবেন না, লিঙ্কটি করবেন না, এই কোডটিকে আপনার বর্তমান বিশ্বব্যাপী সিএসএসে রাখুন, এটি আপনার সার্ভারের জন্য সর্বোত্তম। এটি কোন প্লাস অনুরোধের প্রয়োজন নেই, এটি একটি পৃথক পদক্ষেপ নয় - ফাইলের আকারের মধ্যে খুব সামান্য বৃদ্ধি যা অনুরোধের প্রক্রিয়াকরণের সময় কার্যত কিছু যোগ করবে না। এটা দেখতে সুন্দর হবে? না ... তবে আপনার সাইটটি পুনর্বিবেচনার চেয়ে অনেক বেশি অনুরোধ জানবে :) সুতরাং সার্ভারকে নিজের সাহায্য করুন, নিজের নয়।

সামগ্রিকভাবে, আমি এটা অতিরিক্ত মাইল মূল্য মনে হয়।

এক-লাইন সংস্করণ দক্ষ কিন্তু সহজ হতে ডিজাইন করা হয় না - সহজে সহজ উপায় চান এমন ব্লগারদের জন্য। তুমি ভালো জানো.

একটি পৃষ্ঠায় গুগল ওয়েব ফন্ট সহ পছন্দের উপায় কি?

  1. লিঙ্ক ট্যাগ মাধ্যমে?

    <link href='http://fonts.googleapis.com/css?family=Judson:400,400italic,700' rel='stylesheet' type='text/css'>
  2. একটি স্টাইলশিট আমদানি মাধ্যমে?

    @import url(http://fonts.googleapis.com/css?family=Kameron:400,700);
  3. অথবা ওয়েব ফন্ট লোডার ব্যবহার করুন

    https://developers.google.com/webfonts/docs/webfont_loader


90% + ক্ষেত্রে আপনি সম্ভবত <link> ট্যাগটি চান। থাম্বের নিয়ম হিসাবে, আপনি @import নিয়মগুলি এড়াতে চান কারণ ফাইলটি আনা না হওয়া পর্যন্ত তারা অন্তর্ভুক্ত সংস্থানের লোডিং বিলম্বিত করে। এবং যদি আপনার একটি বিল্ড প্রক্রিয়া থাকে যা @ ইমপোর্ট এর "ফ্ল্যাট" করে তবে আপনি অন্য সমস্যাটি তৈরি করেন ওয়েব ফন্টগুলি: গুগল ওয়েবফন্টের মতো গতিশীল প্রদানকারীরা ফন্টগুলির প্ল্যাটফর্ম-নির্দিষ্ট সংস্করণগুলি সরবরাহ করে, তাই যদি আপনি কেবল বিষয়বস্তুটি ইনলাইন করেন তবে আপনি কিছু প্ল্যাটফর্মগুলিতে ভাঙা ফন্টগুলি শেষ করবেন।

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

আবার, 90% ক্ষেত্রে <link> ট্যাগটি রয়েছে: একটি ভাল সিডিএন ব্যবহার করুন এবং ফন্ট দ্রুত এবং আরও সম্ভবত, ক্যাশে থেকে পরিবেশন করা হবে।

আরও তথ্যের জন্য, এবং গুগল ওয়েব ফন্টের গভীরতা দেখুন, এই জিডিএল ভিডিওটি দেখুন