मान लें कि मैं font-size:30px; और font-family:Verdana; का उपयोग करता हूं।बिग फ़ॉन्ट साइज, पतला पत्र
मैं उन पत्रों की जरूरत है बड़ा, लेकिन अभी तक पतली होने के लिए, तो मैं font-weight:lighter; की कोशिश की।
फिर भी कुछ भी नहीं बदलेगा, कुछ फ़ॉन्ट छोटे हो जाएंगे, कुछ प्रभावित नहीं होंगे।
मैं बड़े लेकिन पतले अक्षरों को कैसे बना सकता हूं? क्या सीएसएस में कोई तरीका है, या ये विशिष्ट फोंट हैं?
कारण फॉन्ट कुछ वजन का समर्थन नहीं करने के लिए, Verdana का एक दुबला संस्करण प्राप्त करने के लिए, आप फ़ॉन्ट के स्वयं के संस्करण की मेजबानी, या पहले से ही अपने रूप को प्राप्त करने की मेजबानी की एक और फ़ॉन्ट का उपयोग करना होगा।
कुछ फ़ॉन्ट्स अपने आप के हल्के/भारी संस्करणों का समर्थन नहीं करते हैं - यदि वे करते हैं, तो वे सीएसएस संख्यात्मक पैमाने (जैसे आपने बताया) के साथ संरेखित नहीं हो सकते हैं।
here से।
क्योंकि इतने सारे व्यावसायिक गुणवत्ता वेब फोंट वजन के एक किस्म में आते हैं, यह अब यह किया तुलना में संख्यात्मक पैमाने का उपयोग करने के लिए जब हम केवल 'सामान्य' (400) और का सामना करना पड़ा और अधिक समझ में आता है 'बोल्ड' (600)।
100:: अल्ट्रा लाइट
200: पतला
300: आमतौर पर, एक परिवार के भार इन मूल्यों को मैप किया जा सकता प्रकाश
400: नियमित
500: अर्द्ध बोल्ड
600: बोल्ड
700: अतिरिक्त बोल्ड
800: भारी
900: अल्ट्रा भारी
नोट कीवर्ड, वहाँ: आम तौर पर। हकीकत यह है कि, फ़ॉन्ट्स इस पैटर्न के अनुरूप नहीं हैं, जैसे कि जब परिवार के पास वजन की भीड़ होती है, या जहां उनकी परिभाषा आवश्यक नहीं है मानक पैमाने के अनुरूप है।
तो, लंबी कहानी छोटी, आपको या तो फ़ॉन्ट का एक "पतला" संस्करण होस्ट करना होगा (जिसे आपने या तो बनाया/डाउनलोड किया है), या एक अलग फ़ॉन्ट का उपयोग करें।
आईएमओ ताहोमा, हेडली या जिनेवा समान दिखने वाले फ़ॉन्ट हैं, हालांकि ये स्वतंत्र रूप से उपलब्ध नहीं हैं - आप Google fonts पर कुछ के लिए देख सकते हैं, कि आप और @minitech दोनों ने बताया।
यह सबसे नज़दीकी चीज है जिसके साथ मैं आया हूं।
div{
font-family:Verdana;
font-size:30px;
font-weight:100;
-webkit-text-stroke-color: rgb(255,255,255);
-webkit-text-stroke-width: 1px;
-webkit-font-smoothing: antialiased;
}
समस्याएं:
1. केवल वेबकिट ब्राउज़रों (सफारी, क्रोम)
2. यदि पाठ के पीछे की पृष्ठभूमि तो यह दिखाई दे रहा है कि यह एक पाठ स्ट्रोक है कि हो जाएगा एक ठोस रंग नहीं है के साथ काम करता ।
http://jsfiddle.net/dru87/
इसके लिए धन्यवाद; वेबकिट में एंटी-एलियासिंग मेरी स्थिति में बहुत उपयोगी है! – Dan
font-weight का उपयोग फ़ॉन्ट-परिवार से अलग-अलग प्रकार के टाइपफेस (विशिष्ट फोंट) के लिए पूछना है। वर्दाना फ़ॉन्ट परिवार में सामान्य से कोई टाइपफ़ेस हल्का नहीं है, इसलिए आप सामान्य हो जाते हैं। यह उन अधिकांश फ़ॉन्ट्स पर लागू होता है जिन्हें आप आमतौर पर वेब पृष्ठों पर उपयोग कर सकते हैं।
Google Web Fonts में, उदाहरण के लिए, आप सामान्य से सामान्य प्रकार के टाइपफ़ेस वाले कई फ़ॉन्ट परिवार ढूंढ सकते हैं, उदा। स्रोत संस प्रो वजन 200 और 300 है।
नोट: एक टाइपफेस की हल्कीता फ़ॉन्ट के सापेक्ष है। फ़ॉन्ट परिवार में प्रकाश (200) क्या है जो किसी अन्य फ़ॉन्ट परिवार में सामान्य (400) के अनुरूप हो सकता है।
एक पतली फ़ॉन्ट चुनें और लागू bigtext.js/fittext.js या slabtext.js
नहीं सभी फोंट सभी चौड़ाई का समर्थन करता है। यदि आप कुछ अच्छे पतले फोंट की तलाश में हैं। आप इन thin google fonts सूची पर एक नज़र डाल सकते हैं। वे लागू करने के लिए स्वतंत्र और आसान हैं।
चरण 1: गूगल से
https://fonts.googleapis.com/css?family=Lato:100italic 'rel =' स्टाइलशीट 'type =' text/css '> https फोंट लोड करने के लिए में शामिल करें : //fonts.googleapis.com/css परिवार = Lato: 100 'rel =' स्टाइलशीट 'type =' text/css '>
चरण 2: जोड़ें सीएसएस गुण .text { font-family निम्नलिखित: Lato , सान्स सेरिफ़;
फ़ॉन्ट-वेट: 100;
फ़ॉन्ट आकार: 7em; }
हो गया!
अधिक जानकारी यात्रा http://tobiasahlin.com/typesource/01-elements-of-html-and-css/
आप एक अलग फॉन्ट का उपयोग करना होगा के लिए निश्चित रूप से
काम करेंगे। संख्यात्मक मानों को भी आज़माएं: 'फ़ॉन्ट-वेट: 100', आदि – Blender
सभी फोंट सभी वजन में नहीं आते हैं। [Google webfonts] (http://google.com/webfonts) पर एक फ़ॉन्ट ढूंढने का प्रयास करें जो आपकी आवश्यकताओं के अनुरूप है। – Ryan
इन मानों के साथ प्रयास करें: 100, 200, 300. उनमें से एक को काम करना चाहिए। अगर आप Google वेब फ़ॉन्ट का उपयोग करते हैं तो सुनिश्चित करें कि उनके इस पतले संस्करण को आयात करें। – WooCaSh