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

Question

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

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

   <লিঙ্ক href = 'http: //fouts.googleapis.com/css? পরিবার = জুডসন: 400,400italic, 700' rel = 'স্টাইলশিট' টাইপ = 'পাঠ্য / সিএসএস'>

2. স্টাইলশীটে আমদানির মাধ্যমে?

   @ আইম্পোর্ট ইউআরএল (http://fouts.googleapis.com/css?family=Kameron:400,700);

3. অথবা ওয়েব ফন্ট লোডার ব্যবহার করুন

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

Comments

গুগল ফন্ট ব্যবহার করার আগে আপনি এই প্রশ্নটি পড়তে চাইতে পারেন । নির্দিষ্ট প্রকল্পের উপর নির্ভর করে - এটি সর্বদা স্মার্ট পছন্দ নাও হতে পারে।

— ওবমের্ক ক্রোনেন

Answer 1

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

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

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

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

Comments

"যেহেতু ফাইলটি আনার আগে পর্যন্ত তারা অন্তর্ভুক্ত সংস্থানটির লোডিং স্থগিত করে" - @ ইমপোর্ট ব্যবহার করার পক্ষে এটি কি ভাল কারণ নয়? কারণ সাধারণত আপনি ফন্টটি লোড না হওয়া অবধি সামগ্রীটি দেখতে চান না (সেই ফন্টের ঝাঁকুনি এড়াতে)

— অ্যালেক্স

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

— rvighne

এই তথ্যটি গুগল ওয়েব ফন্টের পৃষ্ঠায় থাকা উচিত। এটি কেবল আপনার কাছে তিনটি বিকল্প উপস্থাপন করে - এবং কোনটি কখন ব্যবহার করা উচিত এবং কোনও সহায়ক ইঙ্গিত দেয় না।

— গাল

গুগলের নিজস্ব ' শুরু করা ' টিউটোরিয়ালটি কেবলমাত্র <link>পদ্ধতিটিই ব্যবহার করে , তাই আমি অনুমান করি যে তারা কেবল কথাতীত ফ্যাশনেই তাদের প্রস্তাব দেয়

— জেমস কুশিং

আপনি যোগ করতে চান করতে পারেন rel="preload"থেকে <link>খুব ট্যাগ, কারণ তারপর ফন্ট টেক্সট প্রদর্শিত হয় আগে লোড হবে। 3perf.com/blog/link-rels

— এলিজা মক

Answer 2

আপনি যদি এসইও (সার্চ ইঞ্জিন অপ্টিমাইজেশন) এবং কর্মক্ষমতা সম্পর্কে উদ্বিগ্ন হন তবে <link>ট্যাগটি ব্যবহার করা ভাল কারণ এটি ফন্টটি প্রিললোড করতে পারে।

উদাহরণ:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
 font-family: 'Lato';
 font-style: normal;
 font-weight: 400;
 src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.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;
}
@font-face {
 font-family: 'Quicksand';
 font-style: normal;
 font-weight: 400;
 src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.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;
}
</style>

আরও তথ্যের জন্য এটি পড়ুন: https://ashton.codes/preload-google-fouts-used-resource-hints/

Answer 3

<link>গুগলের দেওয়া সরবরাহটি ব্যবহার করুন কারণ ফন্টে সংস্করণ রয়েছে, তবে ঠিক ঠিক উপরে এটি ব্রাউজারগুলিকে একটি টিসিপি সংযোগ খোলার জন্য এবং ফন্টস.gstatic.com এর সাথে এসএসএলকে আগে থেকে আলোচনার জন্য জিজ্ঞাসা করতে HTML5 এর প্রি সংযোগ বৈশিষ্ট্যটি ব্যবহার করে। এখানে একটি উদাহরণ রয়েছে, যা অবশ্যই আপনার <head></head>ট্যাগে থাকা দরকার:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

Comments

আপনার উদাহরণের স্টাইলশিট লিঙ্কটির চেয়ে প্রাক-সংযোগটি সম্পূর্ণ আলাদা ডোমেন যে এটি সঠিক? fonts.gstatic.comবনামfonts.googleapis.com

— BadHorsie

@ ব্যাডহর্সি এটির পুরো বিষয়টি। Fouts.googleapis.com এ স্টাইলশীটের fouts.gstatic.com- এ একটি সংস্থার লিঙ্ক রয়েছে। আপনি ব্রাউজারকে পরবর্তী হোস্টের সাথে একটি সংযোগ শুরু করার জন্য বলছেন যাতে এটি স্টাইলশীটে লিঙ্কটি খুঁজে পাওয়ার সময়ে এটি সংযুক্ত বা সংযোগ শুরু করে।

— মার্ক সিলিয়া ভিনসেন্টি