लुमेन बूटस्ट्रैप थीम के लिए स्रोत संस प्रो फ़ॉन्ट में सिरिलिक जोड़ें

बूटस्ट्रैप के लिए मुफ्त विषयों की सूची में एक अच्छा लुमेन विषय है, यह फ़ॉन्ट स्रोत सैंस प्रो का उपयोग करता है, जिसमें बॉक्स से बाहर कोई सिरिलिक वर्णमाला नहीं है। स्रोत से फ़ॉन्ट को संकलित करके इस समस्या को आंशिक रूप से स्वतंत्र रूप से हल किया जा सकता है। आंशिक रूप से क्यों - निष्कर्ष देखें।

1. OpenType के लिए Adobe फ़ॉन्ट डेवलपमेंट किट इंस्टॉल करें

OpenType के लिए Adobe फ़ॉन्ट डेवलपमेंट किट डाउनलोड करें। इंस्टॉलेशन को कुछ फ़ोल्डर में संग्रह को अनपैक करने के लिए फोड़ा जाता है, जिसका निरपेक्ष पथ में रिक्त स्थान नहीं है, और प्रशासक अधिकारों के साथ FinishInstallWindows.cmd स्क्रिप्ट चला रहा है। उसके बाद, आपको लॉग इन या रिबूट करने की आवश्यकता है।

2. फ़ॉन्ट स्रोत डाउनलोड करें

GitHub से फ़ॉन्ट स्रोत शाखा डाउनलोड करें और इसे कहीं अनपैक करें। इस शाखा में सिरिलिक और ग्रीक अक्षर शामिल हैं, जो अभी तक आधिकारिक रिलीज में शामिल नहीं हैं।

3. आवश्यक शैलियों का निर्धारण करें

फ़ॉन्ट स्रोतों में कई अलग-अलग शैलियाँ हैं, हम यह पता लगाएंगे कि हमें किन चीज़ों की ज़रूरत है। ल्यूमेन थीम की बूटस्ट्रैप . css फ़ाइल खोलना, पहली पंक्ति में हम देखते हैं कि फोंट गूगल सर्वर से आयात किए जाते हैं:

@import url("//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic"); 

हम इस पते पर जाते हैं, हमें एक विवरण मिलता है:

 @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/M2Jd71oPJhLKp0zdtTvoMzNrcjQuD0pTu1za2FULaMs.woff) format('woff'); } 

इसका मतलब है कि हमें केवल चार शैलियों की आवश्यकता है: लाइट, रेगुलर, बोल्ड, इटैलिक।

4. हम शैलियों को संकलित करते हैं

संकलन Makeotf -r कमांड के साथ किया जाता है। यह कमांड एक फोल्डर में करंट फोल्डर में एक फेस को प्रोसेस करता है। प्रत्येक बार कंसोल में फ़ोल्डर्स के माध्यम से जाने और कमांड को मैन्युअल रूप से चलाने के बजाय, हम PowerShell के लिए एक स्क्रिप्ट बनाते हैं जो बैच मोड में सभी आवश्यक फ़ाइलों को संकलित करता है। एक आधार के रूप में, फॉन्ट के रूट फ़ोल्डर से build.sh स्क्रिप्ट लें और उसी जगह नाम build.ps1 के तहत नई फ़ाइल को सहेजें।

 $family='SourceSansPro' $romanWeights='Bold', 'Light', 'Regular' $italicWeights='It' # clean existing build artifacts rm -recurse -force target mkdir target mkdir target\otf foreach ($w in $romanWeights) { cd Roman\$w makeotf -r -o ..\..\target\otf\$family-$w.otf cd ..\.. rm Roman\$w\current.fpr # remove default options file from the source tree after building } foreach ($w in $italicWeights) { cd Italic\$w makeotf -r -o ..\..\target\otf\$family-$w.otf cd ..\.. rm Italic\$w\current.fpr # remove default options file from the source tree after building } 

हम स्क्रिप्ट को चलाने का प्रयास करते हैं । \ Build.ps1 व्यवस्थापक अधिकारों के साथ। यदि कोई सुरक्षा त्रुटि होती है, तो इसका अर्थ है कि PowerShell स्क्रिप्ट को चलाना नीति द्वारा निषिद्ध है। निष्पादन सक्षम करने के लिए, कमांड दर्ज करें:

 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned 

उसके बाद, सब कुछ काम करना चाहिए और लक्ष्य । Otf \ फ़ोल्डर में चार .otf फाइलें दिखाई देंगी ।

5. .wf में कनवर्ट करें

Sfnt2woff डाउनलोड करें और इसे फ़ॉन्ट फ़ोल्डर में सहेजें। हम रूपांतरण के लिए स्क्रिप्ट Convert.ps1 लिखते हैं:

 $otfFiles = dir target\otf -Filter *.otf -Name # clean existing convert artifacts rm -recurse -force target\woff mkdir target\woff foreach ($otf in $otfFiles) { .\sfnt2woff.exe target\otf\$otf } mv target\otf\*.woff target\woff 

स्क्रिप्ट को लक्ष्य \ woff \ फ़ोल्डर में चलाने के बाद, कनवर्ट की गई फ़ाइलें दिखाई देंगी।

6. फ़ॉन्ट को प्रोजेक्ट से कनेक्ट करें

ASP.NET MVC के मामले में, .woff फ़ाइलों को प्रोजेक्ट के फोंट \ फ़ोल्डर में कॉपी करें और उन्हें इसमें शामिल करें। फ़ोल्डर में Content \ एक नई फ़ाइल bootstrap.lumen.path.css बनाएं और उसमें निम्नलिखित लिखें:

 @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url(/fonts/SourceSansPro-Light.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url(/fonts/SourceSansPro-Regular.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: url(/fonts/SourceSansPro-Bold.woff) format('woff'); } @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: url(/fonts/SourceSansPro-It.woff) format('woff'); } 

फ़ाइल में एक नई पंक्ति जोड़ें App_Start \ बंडलConfig.cs । यह महत्वपूर्ण है कि यह bootstrap.lumen.css से कम हो।

 bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.lumen.css", "~/Content/bootstrap.lumen.path.css", "~/Content/site.css")); 

निष्कर्ष

यह सब, समस्या आंशिक रूप से हल हो गई है। आंशिक रूप से - क्योंकि इस समय सिरिलिक वर्णमाला के लिए कोई इटैलिक्स नहीं है।


फ़ॉन्ट डेवलपर, पॉल हंट , से जब इटैलिक्स के बारे में पूछा गया, तो उन्होंने कहा कि किसी दिन सिरिलिक वर्णमाला दिखाई देगी, लेकिन वह यह नहीं कह सकते कि यह कब होगा।

समाप्त .woff फ़ाइलों का एक संग्रह यहां डाउनलोड किया जा सकता है ।