मोबाइल उपकरणों के लिए आइकन फोंट

पिछले कुछ समय से हम Mail.Ru सर्च के दो मोबाइल संस्करणों का समर्थन कर रहे हैं। यह पोस्ट ग्राफिकल इंटरफेस के बारे में कुछ तकनीकी जानकारी प्रकट करना चाहेगी।

पहला संस्करण सरल फोन पर केंद्रित है जो धीरे-धीरे लेकिन निश्चित रूप से मोबाइल उपकरणों के लिए आधुनिक बाजार को छोड़ रहा है, लेकिन अभी तक पूरी तरह से भुला नहीं गया है। हम इस श्रेणी में एक पूर्ण ऑपरेटिंग सिस्टम के बिना फोन शामिल करते हैं, जो ब्राउज़र पुराने हैं, पूर्ण-जावास्क्रिप्ट जावास्क्रिप्ट कोड को नहीं समझते हैं और उनकी सीमाओं के कारण, तेजी से बढ़ती इंटरनेट प्रौद्योगिकियों का समर्थन नहीं कर सकते हैं। इस समूह के लिए मुझे सिद्ध पुराने तरीके - .png- और .gif- ग्राफिक्स का उपयोग करना था।

दूसरा संस्करण, जिसे हम समर्थन करते हैं और विकसित करते हैं, स्मार्टफोन के लिए डिज़ाइन किया गया है। उसके बारे में आज और चर्चा की जाएगी।

भाग 1: आइकन फ़ॉन्ट कनेक्ट करना

आधुनिक स्मार्टफ़ोन में कई विशेषताएं होती हैं जिन्हें नहीं भूलना चाहिए और जिसके लिए आपको अनुकूलित करना होगा। उनमें से एक बढ़ी हुई पिक्सेल घनत्व (विशेष रूप से, रेटिना-स्क्रीन) के साथ स्क्रीन की उपस्थिति है, पृष्ठ को बड़ा करने की संभावना है और इसके परिणामस्वरूप, सामान्य चित्रों को धुंधला कर रहा है। इस वजह से, स्केलेबल ग्राफिक्स के उपयोग के लिए एक आवश्यकता उत्पन्न हुई जो स्पष्ट रूप से 1: 1 के पैमाने पर और एक के बाद एक कई वृद्धि के साथ दिखाई देगी। इस स्थिति से बाहर का रास्ता आइकन फोंट का उपयोग था। नीचे दी गई तस्वीर दो विकल्पों को दिखाती है: शीर्ष एक .png चित्र दिखाता है, 2 गुना बढ़े हुए, और नीचे - समान आवर्धन के साथ आइकन के साथ फ़ॉन्ट का उपयोग करने का परिणाम।



प्रक्रिया का सार यह है कि फ़ॉन्ट फ़ाइल में अक्षरों को ग्राफिक आइकन के साथ बदल दिया जाता है - वास्तव में, एक अद्वितीय फ़ॉन्ट बनाया जाता है। हमारे मामले में, उदाहरण के लिए, "@" आइकन को मैग्निफाइंग ग्लास, अंग्रेजी अक्षर "I" (इंटरनेट से) - ग्लोब आइकन, अक्षर "P" (चित्रों से) - छवि आइकन, और इसी तरह से बदल दिया जाता है। प्रतिस्थापित करते समय, ग्राफिक्स और पत्र वर्णों की सापेक्ष समानता का पालन करना उचित है, ताकि यदि किसी कारण से फ़ॉन्ट लोड न हो, तो उपयोगकर्ता अभी भी साइट को नेविगेट कर सकता है।

कस्टम फ़ॉन्ट लोडिंग सीएसएस @ फॉन्ट-फेस निर्माण का उपयोग करते हुए पीसी के लिए समान है। एकमात्र अंतर और एक बड़ा प्लस यह है कि स्मार्टफ़ोन के साथ काम करते समय आपको विभिन्न फ़ॉन्ट प्रारूपों (.eot, .woff, .ttf, .svg) का समर्थन करने के बारे में चिंता करने की आवश्यकता नहीं होती है, क्योंकि यह विभिन्न ब्राउज़रों के कारण पीसी के लिए आवश्यक है।

ऑपरेटिंग सिस्टम आईओएस, एंड्रॉइड, बडा और ब्लैकबेरी पर आधारित फोन के लिए, यह एक प्रारूप को लोड करने के लिए पर्याप्त है। यह न केवल अंतर्निहित ब्राउज़रों द्वारा, बल्कि मोबाइल फ़ायरफ़ॉक्स, क्रोम और ओपेरा मोबाइल द्वारा भी अच्छी तरह से समझा जाता है।

स्टाइलशीट में, लोडिंग इस तरह दिखता है:

@font-face { font-family: 'goMailIco'; src: url("/font/goMailIco.ttf"); font-weight: normal; font-style: normal; } 

और फिर भी, इस तथ्य के बावजूद कि आधुनिक स्मार्टफ़ोन में ऐसी विशेषताएं हैं जो कभी-कभी व्यक्तिगत कंप्यूटर के साथ तुलना करने योग्य होती हैं, उनमें से एक हैं जो एक विशेष दृष्टिकोण की आवश्यकता होती है। वेबसाइट के प्रदर्शन की गुणवत्ता में सुधार करने के संघर्ष में, मुझे स्मार्टफ़ोन के एक समूह का चयन करना था, जो चित्र दिए गए हैं। इस समूह में ऑपरेटिंग सिस्टम पर डिवाइस शामिल हैं जैसे कि विंडोज फोन 7 और एंड्रॉइड वर्जन 2.2 से कम, साथ ही ओपेरा मिनी ब्राउज़र, किसी भी ओएस के साथ फोन पर खुला। हमने परीक्षण उपकरणों के साथ प्रयोगों के बाद इसे अलग किया।

सर्वर की ओर, प्रत्येक डिवाइस जिसमें से go.mail.ru एक्सेस किया जाता है, उपयोगकर्ता एजेंट और अन्य मापदंडों द्वारा निर्धारित किया जाता है। इसके अलावा इस डेटा को टेम्प्लेट इंजन में स्थानांतरित किया जाता है - जिन्जा का उपयोग मेल पर किया जाता है। खोज प्रोजेक्ट। यह निर्धारित करने के लिए एक रिकॉर्ड कि क्या उपयोगकर्ता को एक फ़ॉन्ट या चित्र देना है:

 {% set switchFont = (detector.os in ('iphone os', 'blackberry', 'bada') or detector.os == 'android' and detector.osver >= 2.2) and (not detector.is_opera_mini) %} 

यदि डिवाइस iOS, BlackBerry, bada या Android ऑपरेटिंग सिस्टम संस्करण को 2.2 या अधिक के बराबर चला रहा है, और is_opera_mini वैरिएबल गलत है, तो switchFont वैरिएबल सही है। इसके बाद, स्विचफोंट के मूल्य के आधार पर, दो में से एक को टेम्प्लेट में प्रदर्शित किया जाता है।

नीचे एक उदाहरण लोगो का उपयोग करके टेम्पलेट में कोड का एक टुकड़ा है:

 {% if switchFont %} <div class="logo__ttf"> <a href="#"> <span class="logo__ttf_color">@</span>mail<span class="logo__ttf_color">.ru</span> </a> </div> {% else %} <a href="#"> <div class="logo__img"></div> </a> {% endif %} 

उसके लिए शैलियाँ इस तरह दिखती हैं:

 .logo__img { background: url(data:image/png) 0 0 no-repeat; background-size: 100% auto; width: 165px; height: 25px; } .logo__ttf { font-family: 'goMailIco'; color: #fff; font-size: 24px; } .logo__ttf_color { color: #ffb81d; } 

यदि टेम्पलेट इंजन ने .logo__ttf वर्ग के प्रत्येक अक्षर के लिए फ़ॉन्ट विकल्प का उपयोग करने का निर्णय लिया है, तो गैर-मानक फ़ॉन्ट 'goMailIco' लागू किया जाता है, जिसमें कॉर्पोरेट mail.ru फ़ॉन्ट से पत्र द्वारा प्रतिस्थापित किया जाता है। यह केवल फ़ॉन्ट-आकार का उपयोग करके सही आकार का चयन करने के लिए बनी हुई है, रंग, छाया सेट करें और, यदि वांछित हो, तो CSS3 की सभी विशेषताओं का उपयोग करें।

मामले में जब हम तस्वीर लेते हैं, तो स्थिति लगभग मानक होती है, सिवाय इसके कि हम छवि को दो बार आवश्यकतानुसार अपलोड करते हैं। उदाहरण के लिए, बढ़े हुए पिक्सेल घनत्व के साथ एक स्क्रीन पर 200x300 पिक्सेल की तस्वीर दिखाने के लिए, आपको 400x600 पिक्सेल छवि लोड करने की आवश्यकता है और फिर इसे सीएसएस विशेषताओं, एचटीएमएल मापदंडों, या, जैसा कि हमारे मामले में, आवश्यक आयाम आयामों के साथ पृष्ठभूमि के रूप में एक छवि का उपयोग करके कम करना होगा। जो "पृष्ठभूमि-आकार: 100% ऑटो" शैली का उपयोग करके आकार में दोगुना हो जाता है।

इस विकल्प के साथ, मानक स्क्रीन रिज़ॉल्यूशन (डिवाइस-पिक्सेल-अनुपात: 1) के साथ स्मार्टफ़ोन के लिए अत्यधिक बड़ी छवियां डाउनलोड करना संभव है, जो विस्तार के लिए उपयुक्त नहीं हैं। यह बेस -64 प्रारूप में पृष्ठभूमि छवि को एन्कोडिंग द्वारा मुआवजा दिया गया है, जो आपको फ़ाइल आकार में अंतर जीतने और दो स्वरूपों में छवियों को स्टोर करने और बनाए रखने की आवश्यकता को समाप्त करने की अनुमति देता है - 1 से 1 और 2 से 1. प्लस, यह विधि भी http की संख्या को कम करती है -सर्वर के लिए, जो समग्र डाउनलोड गति को बढ़ाता है।

भाग 2: फ़ॉन्ट डिज़ाइन

एक फ़ॉन्ट को आइकनों से जोड़ने के तकनीकी विवरण पर चर्चा करने के बाद, हम वर्णन करेंगे कि इस तरह का फ़ॉन्ट कैसे विकसित किया जाता है। यदि आपके पास पहले से ही वेक्टर प्रारूप में आइकन या अन्य ग्राफिक्स हैं, तो आधा काम किया जाता है; अन्यथा, मौजूदा रेखापुंज आइकनों को वेक्टर संपादक में फिर से बनाना होगा। आप एक दस्तावेज़ में परतों में ग्राफिक्स के पूरे सेट को व्यवस्थित कर सकते हैं, लेकिन एक फ़ॉन्ट में असेंबली के लिए, प्रत्येक चरित्र को अलग-अलग फ़ाइलों में निर्यात करना बेहतर होता है, जिसका प्रारूप मौजूदा फ़ॉन्ट संपादक द्वारा आयात किया जा सकता है।



500 से 1000 पिक्सेल तक वस्तुओं के बड़े आकार के साथ काम करना बेहतर है। इस मामले में, अत्यधिक विवरण से बचा जाना चाहिए, क्योंकि आइकन को स्क्रीन पर 16-32 पिक्सेल के आकार के साथ व्यवस्थित किया जा सकता है। स्ट्रोक और किसी भी प्रभाव के बिना, एक-रंग रूपों का उपयोग करें; रंग और अन्य प्रभाव, उदाहरण के लिए, एक छाया, पृष्ठ लेआउट पर पहले से ही आइकन पर लागू किया जा सकता है। यदि आपको आइकन में कई रंगों का उपयोग करने की आवश्यकता है, तो आपको इसे तत्वों में तोड़ना होगा, जिनमें से प्रत्येक इसे एक अलग फ़ॉन्ट प्रतीक बनाता है, जो तब एक-दूसरे पर आरोपित हो जाएगा और तदनुसार रंग होगा।



कई संपादक कार्यक्रम हैं, उदाहरण के लिए फ़ॉन्ट निर्माता (विंडोज के लिए), ग्लिफ़ (मैक के लिए) या इंकस्केप (विंडोज, मैक, लिनक्स के लिए) - आप तुरंत वेक्टर ग्राफिक्स को संपादित कर सकते हैं और svg प्रारूप में एक फ़ॉन्ट बना सकते हैं।

अंतिम परिणाम के लिए, यह इतना महत्वपूर्ण नहीं है कि क्या आप एक नया फ़ॉन्ट बनाते हैं या समाप्त एक के पात्रों को प्रतिस्थापित करते हैं; लेकिन, किसी वर्ण को एक खाली फ़ॉन्ट में जोड़ने के लिए, आपको मैन्युअल रूप से अलग-अलग ऑपरेटिंग सिस्टम के लिए वर्ण के अनुरुप एक इंडेक्स की खोज करनी होगी और फिर विभिन्न मैट्रिक्स को कॉन्फ़िगर करना होगा। एक लाइसेंस के साथ एक तैयार किए गए फ़ॉन्ट को आधार के रूप में लेना आसान है, जो इसके परिवर्तन की अनुमति देता है - उदाहरण के लिए, font.cc से । हम तैयार किए गए वेक्टर ग्राफिक्स को आयात करते हैं, चयनित अक्षरों की जगह लेते हैं, और आधारभूत के साथ संरेखित आकार, इंडेंट के पत्राचार की निगरानी करते हैं।



यदि आपने आइकन को बहु-रंगीन तत्वों में तोड़ दिया है, तो आगे ओवरले के साथ उनकी स्थिति और आकार को एक दूसरे के सापेक्ष रखना बेहतर है। इस स्तर पर, आपको संभवतः परीक्षण करना होगा और संभवतः, आइकन की स्थिति और आकार को स्पष्ट करना होगा।



यदि आपका संपादक केवल .ttf के अलावा किसी अन्य प्रारूप में फ़ॉन्ट सहेजता है, तो आप रूपांतरण के लिए ऑनलाइन सेवाओं का उपयोग कर सकते हैं, उदाहरण के लिए, फोंटक्वायरल । ऐसी सेवाएं आपको अप्रयुक्त वर्णों को हटाकर फ़ाइल का आकार कम करने की अनुमति देती हैं, लेकिन संपादक में विकास के स्तर पर ऐसा करना बेहतर है।

वह सब है। यदि आपको अल्ट्रा-हाई रिज़ॉल्यूशन स्क्रीन के लिए कुछ वैकल्पिक समाधान मिलते हैं - शेयर।

खोज प्रोजेक्ट का मोबाइल संस्करण देखने के लिए, go.mail.ru पर एक मोबाइल डिवाइस से जाएं।

दरिया स्कैकुन, प्रोजेक्ट सर्च के मोबाइल संस्करणों के डेवलपर
मोबाइल प्रोजेक्ट एरिया सर्च के प्रमुख एलेक्सी लिकोजिजीवस्की हैं