[Css] Google फ़ॉन्ट डाउनलोड करना और ऑफ़लाइन साइट सेट करना जो इसका उपयोग करता है



Answers

मुझे पता है कि मैं पार्टी के लिए देर हो चुकी हूं लेकिन चूंकि यह Google पर उच्च रैंकिंग है: Google वेबफॉन्ट सहायक देखें । यह आपको Google के हर वेब फ़ॉन्ट को डाउनलोड करने देता है और कार्यान्वयन के लिए सीएसएस कोड सुझाता है। यह टूल आपको बिना किसी परेशानी के एक बार में सभी प्रारूपों को डाउनलोड करने की अनुमति देता है।

कभी यह जानना चाहता था कि Google अपने वेबफोंट कहां होस्ट करता है? यदि आप Google से सीधे फ़ॉन्ट संस्करण के सभी .eot, .woff, .woff2, .svg, .ttf फ़ाइलों को डाउनलोड करना चाहते हैं, तो यह सेवा आसान हो सकती है (आमतौर पर आपका उपयोगकर्ता-एजेंट सर्वश्रेष्ठ प्रारूप निर्धारित करेगा)।

इसके अलावा उनके गिथब पेज पर नज़र डालें।

Question

मेरे पास एक टेम्पलेट है और इसमें Google फ़ॉन्ट का संदर्भ है:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

मैं इसे कैसे डाउनलोड कर सकता हूं और इसे अपने पृष्ठों में उपयोग करने के लिए सेट अप कर सकता हूं जो हर समय ऑफ़लाइन चल रहे हैं?




मैंने जवाब को नीचे दिए गए पायथन कोड का उत्पादन करने के लिए किया जो इस प्रक्रिया को स्वचालित करता है।

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

उम्मीद है कि यह कुछ कॉपी-पेस्ट मौत के साथ मदद करता है।




अन्य उत्तरों गलत नहीं हैं, लेकिन मुझे यह सबसे तेज़ तरीका माना गया।

  1. Google फोंट से ज़िप फ़ाइल डाउनलोड करें और इसे अनजिप करें।
  2. एक समय में फ़ॉन्ट फ़ाइलों को 3 पर अपलोड करें http://www.fontsquirrel.com/tools/webfont-generator
  3. परिणाम डाउनलोड करें।

परिणामों में सभी फ़ॉन्ट प्रारूप होते हैं: woff, svg, ttf, eot

और एक अतिरिक्त बोनस के रूप में वे भी आपके लिए सीएसएस फ़ाइल उत्पन्न करते हैं!




Google फ़ॉन्ट्स का उपयोग करते समय, आपका वर्कफ़्लो 3 चरणों में विभाजित होता है: "चुनें", "समीक्षा करें", "उपयोग करें"। यदि आप "उपयोग" पृष्ठ के दाहिने सिरे पर बारीकी से देखते हैं, तो एक छोटा तीर है जो आपको वर्तमान में आपके संग्रह में फ़ॉन्ट डाउनलोड करने की अनुमति देता है।

उसके बाद, और एक बार फ़ॉन्ट आपके सिस्टम पर स्थापित हो जाने पर, आपको font-family सीएसएस निर्देश का उपयोग करके इसे किसी अन्य नियमित फ़ॉन्ट की तरह उपयोग करना होगा।




बस फ़ॉन्ट डाउनलोड करें और इसे एक फ़ोल्डर में निकालें। फिर उस फ़ॉन्ट को लिंक करें। नीचे दिया गया कोड मेरे लिए ठीक से काम करता है।

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}



Links