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

271

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

fonts  google-font-api 
— সমরথ ভার্গব
সূত্র
6
আমি যা বুঝতে পারি তা হ'ল এটি একটি ফাইল ডাউনলোড করা এবং সংরক্ষণ করার মতো সহজ নয়। প্রতিটি ব্রাউজার একটি ভিন্ন ফন্ট ফর্ম্যাট সমর্থন করে এবং গুগল সমস্ত প্রয়োজনীয় ফাইলগুলি পাওয়ার জন্য প্রত্যক্ষ এবং সহজ উপায় সরবরাহ করে না যাতে ফন্টটি সমস্ত ব্রাউজারগুলিতে সঠিকভাবে কাজ করে।
— সমর্দ্ধ ভার্গব
1
আপনি লিঙ্কযুক্ত স্টাইলশিট থেকে সমস্ত ইউআরআই পান।
— ফুসিয়া
38
হ্যাঁ, আমি নিজেই সমস্ত বিবরণটি চিত্রিত করতে পারি, বা আমি এটি জিজ্ঞাসা করতে পারি যে এটির আগে কেউ তা করেছে কিনা এবং অভিজ্ঞতা ও স্ক্রিপ্টগুলি ভাগ করে নেওয়ার জন্য রয়েছে
— সমার্থক ভার্গব
2
ওয়েল, গুগল fonts.googleapis.com/css?আপনার সংযুক্ত আরম্ভের শিরোনামের উপর নির্ভর করে বিভিন্ন উত্তর ফেরত দেয় (পড়ুন: আপনার ব্রাউজার) ➝ সুতরাং তারা কেবল সরবরাহ করে, বর্তমান ব্রাউজারটির কী প্রয়োজন। যদি কেউ প্রয়োজনীয় সমস্ত ফন্ট পেতে (বা এমনকি কেবল ইউআরএল) পেতে চায় তবে আপনার ডাইরেন্ট ব্রাউজারের রেফারেন্স থেকে একাধিক সিএসএস ফাইলের প্রয়োজন হবে। বিভিন্ন নকল শিরোনাম সহ, প্রয়োজনীয় সমস্ত কিছু পেতে।
— ফ্র্যাঙ্ক নোক
এই সরঞ্জামটি ব্যবহার করুন: npmjs.com/package/font-ranger
— Async

উত্তর:

217

দয়া করে মনে রাখবেন যে আমার উত্তরটির বয়স অনেক বেশি।

নীচে আরও আরও প্রযুক্তিগত পরিশীলিত উত্তর রয়েছে, যেমন:

সুতরাং এটি বর্তমানে গৃহীত উত্তর আপনাকে এই ধারণাটি দেয় না যে এটি এখনও সেরা।

এছাড়াও আপনি এখন googleub- এর মাধ্যমে ফটোগুলি সেটগুলি গুগল / ফন্টের সংগ্রহস্থলে ডাউনলোড করতে পারেন । তারা তাদের ফন্টগুলির একটি 20 420MB জিপ স্ন্যাপশট সরবরাহ করে ।

আপনি প্রথমে আপনার ফন্ট নির্বাচনটি একটি জিপড প্যাকেজ হিসাবে ডাউনলোড করেন, আপনাকে সত্যিকারের ফন্টের একগুচ্ছ সরবরাহ করে। এগুলি সর্বজনীনভাবে অনুলিপি করুন, কোথাও আপনি আপনার CSS থেকে লিঙ্ক করতে পারেন।

গুগল ওয়েবফন্ট ডাউনলোড পৃষ্ঠায়, আপনি এর মতো একটি অন্তর্ভুক্ত লিঙ্ক পাবেন:

http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal

এটি একটি সিএসএসের সাথে ফন্টগুলি সংজ্ঞায়িত করার মাধ্যমে @font-faceসংযুক্ত করে।

এগুলিকে আপনার নিজের সিএসএসে অনুলিপি করে আটকানোর জন্য এটি ব্রাউজারে খুলুন এবং সঠিক ফন্ট ফাইল এবং ফর্ম্যাট প্রকারগুলি অন্তর্ভুক্ত করার জন্য ইউআরএলগুলি সংশোধন করুন।

আমার স্নাতকের:

@font-face {
  font-family: 'Cantarell';
  font-style: normal;
  font-weight: 700;
  src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

এটি হয়ে:

/* Your local CSS File */
@font-face {
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 700;
    src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}

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

তদতিরিক্ত, .htaccessক্রোম দেব সরঞ্জামগুলিতে পপিং হওয়া থেকে ত্রুটিগুলি এড়াতে আমাকে আমার ডিরেক্টরিতে মাইম টাইপযুক্ত ফন্ট ধারণ করে একটি ডিরেক্টরি যুক্ত করতে হয়েছিল।

এই সমাধানের জন্য, কেবলমাত্র সঠিক ধরণের প্রয়োজন, তবে আপনি যখন বিভিন্ন ফন্টও অন্তর্ভুক্ত করতে চান, তখন আরও সংজ্ঞা দেওয়া ক্ষতি করে না font-awesome।

#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
— k0pernikus
সূত্র
37
আপনি ট্রু টাইপের মধ্যে সীমাবদ্ধ নন, আপনার কেবল। ওফ ফাইলগুলিও ডাউনলোড করতে হবে, যেমন। আপনার ওয়েব ব্রাউজারে 'http: //themes.googleusercontent.com/static/fouts/cantarell/v3/...80lGh-uXM.woff' রাখুন এবং এটিকে '/fouts/Cantarell-Bold.woff' হিসাবে সংরক্ষণ করুন এবং আপডেট করুন সিএসএস টু ম্যাচ (ইউআরএল ('/ ফন্ট / ক্যান্টেরেল-বোল্ড.উফ'))
— অ্যান্টনি ব্রিগস
2
গুগল বেশ কয়েকটি ফন্ট ফর্ম্যাট সরবরাহ করার কারণ রয়েছে - ট্রু টাইপ পুরানো ব্রাউজারগুলিতে কাজ করে না । ডাব্লুএফএফ ডাব্লু 3 সি স্ট্যান্ডার্ড।
— মাইকেল ম্যাকগিনিস
3
বাশ স্ক্রিপ্ট সমাধানে নীচে স্ক্রোল করুন - দুর্দান্ত!
— ডাঃ ম্যাক্স ভেল্কেল
3
ব্রাউজারটি ব্যবহৃত হচ্ছে তার উপর নির্ভর করে ফাইলটি সামগ্রী পরিবর্তন করে।
— ক্রি
3
এই প্রতিক্রিয়াটি নীচে তালিকাভুক্ত বিকল্পগুলির চেয়ে মোতায়েন করা আরও জটিল; এটি প্রযুক্তিগত দিক থেকেও বেশ কয়েকটি ক্ষেত্রে ভুল (টিটিএফের কোনও সীমাবদ্ধতা নেই, টিটিএফ একটি খারাপ ধারণা, এটি ব্রাউজার প্রতি বিভিন্ন ফলাফল দেয়, আপনি একই ফলের জন্য যে কোনও জায়গায় প্রকাশ্যে ফন্ট হোস্ট করতে পারবেন না)। দয়া করে এটি করবেন না, নীচের অন্য উত্তরগুলির মধ্যে একটি ব্যবহার করুন।
— রবিন বার্জন
202

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

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

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

দুর্দান্ত সমাধান হ'ল গুগল-ওয়েবফন্টস-সহায়ক ।

এটি আপনাকে একাধিক ফন্ট বৈকল্পিক নির্বাচন করতে দেয় যা অনেক সময় সাশ্রয় করে।

— দামির বুলিক
সূত্র
দুর্দান্ত সরঞ্জাম! আমি এটা ভালোবাসি. আপনি ফন্টের পূর্বরূপ দেখতে এবং এক ক্লিকে প্রয়োজনীয় ফাইলগুলি ডাউনলোড করতে পারেন।
— সিক্সিপিং
খুব সুন্দর সরঞ্জাম। খুব ভাল কাজ করে এবং latin-extহরফ ডাউনলোড করতে দেয় ।
— piotrekkr
3
এটি সেরা বিকল্প। এটি সবকিছু করে, আপনি এমনকি ফন্ট ফোল্ডার উপসর্গ নির্দিষ্ট করতে পারেন।
— ম্যাকিয়েজ ক্রাওকিজিক
63

আমি একটি বাশ স্ক্রিপ্ট লিখেছি যা গুগলের সার্ভারে সিএসএস ফাইলটি বিভিন্ন ব্যবহারকারী এজেন্টের সাথে নিয়ে আসে, স্থানীয় ডিরেক্টরিতে বিভিন্ন ফন্টের ফর্ম্যাট ডাউনলোড করে এবং সেগুলি সহ একটি সিএসএস ফাইল লেখেন। নোট করুন যে স্ক্রিপ্টটির বাশ সংস্করণ 4.x প্রয়োজন।

স্ক্রিপ্টের জন্য https://neverpanic.de/blog/2014/03/19/downloading-google-web-fouts-for-local-hosting/ দেখুন (আমি এখানে এটি পুনরুত্পাদন করছি না তাই আমাকে কেবল এটি আপডেট করতে হবে আমার যখন প্রয়োজন তখন এক জায়গা)।

সম্পাদনা: https://github.com/neverpanic/google-font-download এ সরানো হয়েছে

— neverpanic
সূত্র
4
এটি আরও ভয়ঙ্কর! (আমি আশা করি এটি এখনও ভাল পরীক্ষিত নয়) works আমি বছরের পর বছর সময়ে এই ফর্মের মতো কিছু অনুসন্ধান করেছি। কোন মজা নেই, এমনকি আমি আমার নিজস্ব স্ক্রিপ্টও লিখতে শুরু করেছি যা সম্পূর্ণ থেকে দূরে। এর মন ফুঁকছে যে খুব কম লোকই এটি চায়। গুগল এই ফন্টগুলি উত্পন্ন স্ট্রিংগুলির আড়ালে লুকিয়ে রেখেছে এবং কোনও উন্মুক্ত উত্সই কেবল ওয়েবফোন্ট ফাইলগুলি রেপোতে কেবলমাত্র টিটিএফ নয়। তারা আমাদের তাদের ফন্টগুলি ব্যবহার করতে চায়, তারা চায় যে আমরা তাদের সার্ভারগুলি ব্যবহার করব কারণ তারা লোকেরা ট্র্যাকিংয়ের জন্য এটির অপব্যবহার করে। এমনকি গোপনীয়তা সম্পর্কে সচেতন ব্যক্তিরাও গুগল সার্ভার থেকে ফন্টগুলি এম্বেড করে।
— redanimalwar
1
আমার একমাত্র উদ্বেগ হ'ল আসল ফন্ট লাইসেন্সগুলি, সত্যই সেগুলি নিবিড়ভাবে অধ্যয়ন করা হয়নি। আমি কেবল জানি ফন্ট লাইসেন্সগুলি জিপিএল বা এমআইটি থেকে পৃথক। তাহলে আমরা কি আইনত গুগল সার্ভার থেকে এই ফন্টগুলি ধরতে এবং সেগুলি আমাদের নিজস্বভাবে পরিবেশন করার অনুমতি দিচ্ছি? আবার আমি এক মিনিটের জন্যও বিশ্বাস করি না যে গুগল বিশ্বকে আরও উন্নত করার লক্ষ্যে এই সমস্ত ফন্টগুলি দূরে সরিয়ে দিচ্ছে, তারা প্রকৃতপক্ষে তাদের জন্য উন্মুক্ত ফন্ট তৈরি করার জন্য দেবকে অর্থ প্রদান করে যাতে তারা নিশ্চিতভাবে কিছু অর্জন করতে পারে, তথ্য প্রচুর। এবং যদি এটি গোপনীয়তা না হয় তবে আপনি ইন্টারনেট ছাড়াই এই ফন্টগুলি স্থানীয়ভাবে পরীক্ষা করতে পারেন।
— redanimalwar
2
এই উত্তরটি আরও উঁচু করা উচিত, কারণ এই স্ক্রিপ্টটি স্থানীয় ফন্ট ডট কমের বিপরীতে সমস্ত ফন্টের ফর্ম্যাট এবং সাবসেটগুলি ডাউনলোড করতে পারে।
— piotrekkr
আমি জানি আপনি আমাকে একটি অলস ব্যক্তি হিসাবে গ্রহণ করবেন, তবে গড় উইন্ডোজ ব্যবহারকারী হিসাবে এটি এটি সংকলন করতে এবং এটিকে ব্যবহার করতে সক্ষম হতে পারে ইত্যাদি
— লুকাশ বুস্তামেন্টে
@ লুকাসবি কোনও সংকলন জড়িত নেই। এটি একটি বাশ স্ক্রিপ্ট। আমি জানি উইন্ডোজ বাশের সাথে আসে না, তবে উইন্ডোজকে এমনভাবে প্রয়োগ করে নির্দ্বিধায় that এটি আমার ব্যবহারের ক্ষেত্রে কেবল অংশ ছিল না, তাই আমি এতে কোনও সময় ব্যয় করিনি।
— neverpanic
14

সিএসএস ফাইলের বিষয়বস্তু (অন্তর্ভুক্ত ইউআরএল থেকে) নির্ভর করে আমি এটি কোন ব্রাউজার থেকে দেখি on উদাহরণস্বরূপ, ক্রোম ব্যবহার করে http://fouts.googleapis.com/css?family=Open+ সানগুলি ব্রাউজ করার সময় , ফাইলটিতে কেবল ডাব্লুএফএফ লিঙ্ক থাকে। ইন্টারনেট এক্সপ্লোরার (নীচে) ব্যবহার করে এটিতে ইওটি এবং ডাব্লুএফএফ উভয়ই অন্তর্ভুক্ত। আমি ডাউনলোড করতে সমস্ত লিঙ্কগুলি আমার ব্রাউজারে আটকালাম।

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

আপনি যখন নিজের ওয়েব ফন্ট হোস্ট করেন, আপনাকে প্রতিটি ফন্টের প্রকারের সাথে সঠিকভাবে লিঙ্ক করতে হবে , লিগ্যাসি ব্রাউজার বাগগুলি ইত্যাদির সাথে ডিল করতে হবে যখন আপনি গুগল ওয়েব ফন্টগুলি (গুগল দ্বারা হোস্ট করা) ব্যবহার করেন, গুগল স্বয়ংক্রিয়ভাবে সেই ব্রাউজারের জন্য সঠিক ফন্টের লিঙ্কগুলিতে লিঙ্ক করে।

— মাইকেল ম্যাকগিনিস
সূত্র
1
সেই নিবন্ধটির সাথে লিঙ্ক করার জন্য +1 যা ব্যবহার করতে "সার্বজনীন" সিএসএস কোড এবং আধুনিক ব্রাউজারগুলির জন্য একটি "হ্রাস" একটি ব্যাখ্যা করে!
— ইতালিপ্যালএলে
2
সুতরাং আমার তখন স্মার্টলিফিকভাবে বিভিন্ন ফর্ম্যাট সহ ব্রাউজারটি পরিবেশন করতে হবে। আমি জানি এটি অত্যন্ত নিরুৎসাহিত তবে আমরা কিছু পৃষ্ঠার চীন ক্লায়েন্টদের কাছে আমাদের পৃষ্ঠাটি পরিবেশন করছি এবং এটিই মূল কারণ যা আমরা এটি হোস্ট করতে চাই। তারা বেশিরভাগ গুগল সংস্থানগুলি অবরুদ্ধ করেছে।
— লিওনেল চ্যান
6

আপনি ফন্টের লাইসেন্সের শর্তগুলিতে অবিচল থাকেন - সাধারণত অফ-অফ করুন legal

আপনার ওয়েব ফন্ট ফর্ম্যাটগুলির একটি সেট প্রয়োজন হবে এবং ফন্ট কাঠবিড়ালি ওয়েবফন্ট জেনারেটর এগুলি তৈরি করতে পারে।

তবে OFL- র প্রয়োজনীয় ফন্টগুলির নাম পরিবর্তন করতে হবে যদি সেগুলি পরিবর্তন করা হয় এবং জেনারেটর ব্যবহারের অর্থ তাদের পরিবর্তন করা।

— davelab6
সূত্র
অথবা, টাইপফেসের উপর নির্ভর করে আপনি সরাসরি ফন্ট কাঠবিড়ালি থেকে সরাসরি ওয়েবফন্ট কিটটি পেতে পারেন। foutsquirrel.com/fouts/open-sans
— জ্যাক ফ্রস্ট
3

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

এটি অকাল পর্যায়ে রয়েছে তবে এটি এখানে পাওয়া যাবে: দাআউভিনিজপি / পিএইচপি-অফলাইন-ফন্টগুলি

— DaAwesomeP
সূত্র
2

আপনি যেমন আপনার নিজের সার্ভারে সমস্ত ফন্ট (বা এর কয়েকটি) হোস্ট করতে চান, আপনি এই রেপো থেকে একটি ফন্ট ডাউনলোড করুন এবং এটি আপনার পছন্দ মতো ব্যবহার করুন: https://github.com/praisedpk/Local-Google-Fouts

আপনি যদি গুগল ফন্টের সাথে আসা লিভারেজ ব্রাউজারের ক্যাচিংয়ের সমস্যাটি ঠিক করতে এই করতে চান তবে আপনি বিকল্প ফন্ট সিডিএন ব্যবহার করতে পারেন এবং ফন্টগুলি অন্তর্ভুক্ত করতে পারেন :

<link href="https://pagecdn.io/lib/easyfonts/fonts.css" rel="stylesheet" />

অথবা একটি নির্দিষ্ট ফন্ট, যেমন:

<link href="https://pagecdn.io/lib/easyfonts/lato.css" rel="stylesheet" />
— হামিদ সরফরাজ
সূত্র
1

আমি গ্রুর্ট টাস্কে গ্রান্ট-লোকাল-গুগলফন্ট ব্যবহার করেছি ।

module.exports = function(grunt) {

    grunt.initConfig({
       pkg: grunt.file.readJSON('package.json'),

        "local-googlefont" : {
            "opensans" : {
                "options" : {
                    "family" : "Open Sans",
                    "sizes" : [
                        300,
                        400,
                        600
                    ],
                    "userAgents" : [
                        "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)",  //download eot
                        "Mozilla/5.0 (Linux; U; Android 4.1.2; nl-nl; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30", //download ttf
                        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1944.0 Safari/537.36" //download woff and woff2
                    ],
                    "cssDestination" : "build/fonts/css",
                    "fontDestination" : "build/fonts",
                    "styleSheetExtension" : "css",
                    "fontDestinationCssPrefix" : "fonts"

                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-local-googlefont');
 };

তারপরে, তাদের পুনরুদ্ধার করতে:

grunt local-googlefont:opensans

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

— হ্যাঁক
সূত্র
1

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

— Flyhead
সূত্র
1

আমি গুগল ফন্ট সিএসএস আমদানি ইউআরএল থেকে ডাউনলোড লিঙ্কগুলি পেতে একটি ছোট পিএইচপি স্ক্রিপ্ট তৈরি করেছি যেমন: https://fouts.googleapis.com/css?family=Roboto:400,700//Slabo+27pxLiveLato:400,300italic,900italic

আপনি এই সরঞ্জামটি এখানে ব্যবহার করতে পারেন: http://nikoskip.me/gfouts.php

উদাহরণস্বরূপ, আপনি যদি উপরের আমদানি URL ব্যবহার করেন তবে আপনি এটি পাবেন:

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

— nikoskip
সূত্র
1

আপনি যদি ওয়েবপ্যাক ব্যবহার করছেন তবে আপনি এই প্রকল্পে আগ্রহী হতে পারেন: https://github.com/KyleAMathews/typefaces

যেমন আপনি রবোটো ফন্ট ব্যবহার করতে চান বলে:

npm install typeface-roboto --save

তারপরে এটি কেবল আপনার অ্যাপের এন্ট্রিপয়েন্টে (মূল জেএস ফাইল) এ আমদানি করুন:

import 'typeface-roboto'
— জাস্টিন
সূত্র
1

আপনি পিএইচপি ব্যবহার করে তৈরি করা স্ক্রিপ্টটি অনুসরণ করতে পারেন। যেখানে আপনি স্ক্রিপ্ট ব্যবহার করে যে কোনও গুগল ফন্ট ডাউনলোড করতে পারবেন। এটি ফন্টগুলি ডাউনলোড করবে এবং জিপ করার জন্য একটি সিএসএস ফাইল এবং সংরক্ষণাগার তৈরি করবে।
আপনি গিটহাব https://github.com/sourav101/google-fouts-downloader থেকে উত্স কোডটি ডাউনলোড করতে পারেন

$obj = new GoogleFontsDownloader;

if(isset($_GET['url']) && !empty($_GET['url']))
{
    $obj->generate($_GET['url']);
}

if(isset($_GET['download']) && !empty($_GET['download']) && $_GET['download']=='true')
{
    $obj->download();
}

/**
* GoogleFontsDownloader
* Easy way to download any google fonts.
* @author     Shohrab Hossain
* @version    1.0.0 
*/
class GoogleFontsDownloader
{
    private $url      = '';
    private $dir      = 'dist/';
    private $fontsDir = 'fonts/';
    private $cssDir   = 'css/';
    private $fileName = 'fonts.css';
    private $content  = '';
    private $errors   = '';
    private $success  = '';
    public  $is_downloadable  = false;

    public function __construct()
    {
        ini_set('allow_url_fopen', 'on');
        ini_set('allow_url_include', 'on');
    }

    public function generate($url = null)
    {
        if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) 
        {
            $this->errors .= "<li><strong>Invalid url!</strong> $url</li>";
        }
        else
        {
            $this->url = $url;
            // delete previous files
            $this->_destroy();
            // write font.css
            $this->_css();
            // write fonts
            $this->_fonts();
            // archive files
            $this->_archive();
        }  
        // show all messages
        $this->_message();
    }

    public function download()
    { 
        // Download the created zip file
        $zipFileName = trim($this->dir, '/').'.zip';
        if (file_exists($zipFileName))
        {
            header("Content-type: application/zip");
            header("Content-Disposition: attachment; filename = $zipFileName");
            header("Pragma: no-cache");
            header("Expires: 0");
            readfile("$zipFileName");

            // delete file 
            unlink($zipFileName);
            array_map('unlink', glob("$this->dir/*.*"));
            rmdir($this->dir);

        } 
    }   

    private function _archive()
    {
        if (is_dir($this->dir))
        {
            $zipFileName = trim($this->dir, '/').'.zip';
            $zip = new \ZipArchive(); 
            if ($zip->open($zipFileName, ZipArchive::CREATE) === TRUE) 
            {
                $zip->addGlob($this->dir. "*.*");
                $zip->addGlob($this->dir. "*/*.*");
                if ($zip->status == ZIPARCHIVE::ER_OK)
                {
                    $this->success .= '<li>Zip create successful!</li>';
                    $this->is_downloadable = true;
                }
                else 
                {
                    $this->errors .= '<li>Failed to create to zip</li>';
                } 
            } 
            else 
            {
                $this->errors .= '<li>ZipArchive not found!</li>';
            }  
            $zip->close(); 
        }
        else
        {
            $this->errors .= "<li><strong>File</strong> not exists!</li>";
        } 
    }   

    private function _css()
    {  
        $filePath = $this->dir.$this->cssDir.$this->fileName;
        $content  = $this->_request($this->url);
        if (!empty($content))
        {
            if (file_put_contents($filePath, $content))
            {
                $this->success .= "<li>$this->fileName generated successful!</li>";
                $this->content = $content; 
            }
            else
            {
                $this->errors .= '<li>Permission errro in $this->fileName! Unable to write $filePath.</li>';
            }
        }
        else
        {
            $this->errors .= '<li>Unable to create fonts.css file!</li>';
        }
    }

    private function _fonts()
    {
        if (!empty($this->content))
        {
            preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $this->content, $match);
            $gFontPaths = $match[0];
            if (!empty($gFontPaths) && is_array($gFontPaths) && sizeof($gFontPaths)>0)
            {
                $count = 0;
                foreach ($gFontPaths as $url) 
                {
                    $name     = basename($url);
                    $filePath = $this->dir.$this->fontsDir.$name;
                    $this->content = str_replace($url, '../'.$this->fontsDir.$name, $this->content);

                    $fontContent  = $this->_request($url);
                    if (!empty($fontContent))
                    {
                        file_put_contents($filePath, $fontContent);
                        $count++;
                        $this->success .= "<li>The font $name downloaded!</li>";
                    }
                    else
                    {
                        $this->errors .= "<li>Unable to download the font $name!</li>";
                    } 
                }

                file_put_contents($this->dir.$this->cssDir.$this->fileName, $this->content);
                $this->success .= "<li>Total $count font(s) downloaded!</li>";
            }
        }
    }

    private function _request($url)
    {
        $ch = curl_init(); 
        curl_setopt_array($ch, array(
            CURLOPT_SSL_VERIFYPEER => FALSE,
            CURLOPT_HEADER         => FALSE,
            CURLOPT_FOLLOWLOCATION => TRUE,
            CURLOPT_URL            => $url,
            CURLOPT_REFERER        => $url,
            CURLOPT_RETURNTRANSFER => TRUE,
        ));
        $result = curl_exec($ch);
        curl_close($ch);

        if (!empty($result))
        {
            return $result;
        } 
        return false;
    }

    private function _destroy()
    {
        $cssPath = $this->dir.$this->cssDir.$this->fileName;
        if (file_exists($cssPath) && is_file($cssPath))
        {
            unlink($cssPath);
        } 
        else
        {
            mkdir($this->dir.$this->cssDir, 0777, true);
        }

        $fontsPath = $this->dir.$this->fontsDir;
        if (!is_dir($fontsPath))
        {
            mkdir($fontsPath, 0777, true);
        }
        else
        {
            array_map(function($font) use($fontsPath) {
                if (file_exists($fontsPath.$font) && is_file($fontsPath.$font))
                {
                    unlink($fontsPath.$font);
                }
            }, glob($fontsPath.'*.*')); 
        }
    }

    private function _message()
    {
        if (strlen($this->errors)>0)
        {
            echo "<div class='alert alert-danger'><ul>$this->errors</ul></div>";
        }  
        if (strlen($this->success)>0)
        {
            echo "<div class='alert alert-success'><ul>$this->success</ul></div>";
        } 
    } 
}
— সৌরভ
সূত্র
0

কে0 স্পারনিকাস ছাড়াও আমি সেরা পরিবেশিত-স্থানীয় পরামর্শ দিতে চাই । এটি ওয়েবਸਰভার অপারেটরগুলিকে তাদের নিজস্ব ওয়েব সার্ভার থেকে গুগল ওয়েব ফন্টগুলি ডাউনলোড এবং পরিবেশন করতে সক্ষম করার জন্য একটি বাশ (ভি 4) স্ক্রিপ্ট। তবে অন্যান্য ব্যাশ স্ক্রিপ্টের পাশাপাশি এটি ব্যবহারকারীর সম্পূর্ণরূপে স্বয়ংক্রিয়ভাবে (ক্রোন এবং এর মাধ্যমে) আপ-টু-ডেট ফন্ট ফাইল এবং সিএসএস-ফাইল সরবরাহ করে।

— রোনাল্ড ভ্যান এঙ্গেলেন
সূত্র
0

গুগল ওয়েব ফন্ট লিঙ্ক থেকে সমস্ত ফন্ট ডাউনলোড করতে (একাধিক ফন্ট সমর্থিত) খুব সাধারণ স্ক্রিপ্ট রয়েছে Java এটি সিএসএস ফাইল ডাউনলোড করে এবং এটি স্থানীয় ফাইলগুলিতে রূপান্তর করে। ব্যবহারকারী-এজেন্টকে কেবলমাত্র ডাব্লুএফএফ 2 এর চেয়ে অন্যান্য ফাইলগুলিও পেতে অভিযোজিত হতে পারে। Https://github.com/ssc-hrep3/google-font-download দেখুন

ফলস্বরূপ ফাইলগুলি সহজেই একটি বিল্ড প্রক্রিয়াতে যুক্ত করা যায় (যেমন একটি ওয়েবপ্যাক বিল্ডের মতো vue-webpack)।

— SSC-hrep3
সূত্র
0

আপনি https://github.com/google/fouts থেকে উত্স ফন্টগুলি ডাউনলোড করতে পারেন

এর পরে font-rangerআপনার বৃহত ইউনিকোড ফন্টকে একাধিক সাবসেটে (যেমন লাতিন, সিরিলিক) বিভক্ত করতে সরঞ্জামটি ব্যবহার করুন । টুল দিয়ে আপনার নিম্নলিখিতটি করা উচিত:

  • আপনার সমর্থিত প্রতিটি ভাষার জন্য সাবসেট তৈরি করুন
  • ব্যান্ডউইদথ সংরক্ষণের জন্য ইউনিকোড-রেঞ্জের সাবসেটিং ব্যবহার করুন
  • আপনার ফন্টগুলি থেকে ব্লট সরান এবং তাদের ওয়েবের জন্য অনুকূলিত করুন
  • আপনার ফন্টগুলি সংকুচিত woff2 ফর্ম্যাটে রূপান্তর করুন
  • পুরানো ব্রাউজারগুলির জন্য .ফফ ফ্যালব্যাক সরবরাহ করুন
  • হরফ লোডিং এবং রেন্ডারিং কাস্টমাইজ করুন
  • @ ফন্ট-ফেস বিধি সহ সিএসএস ফাইল তৈরি করুন
  • স্ব-হোস্ট ওয়েব ফন্টগুলি বা স্থানীয়ভাবে সেগুলি ব্যবহার করুন

হরফ-রেঞ্জার : https://www.npmjs.com/package/font-ranger

PS আপনি নোড.জেএসআইপি এপিআই ব্যবহার করে এটি স্বয়ংক্রিয় করতেও পারেন

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