एक वेब फ़ॉन्ट

Question

में एकाधिक वजन पैकेजिंग मैं अपने फोंट को उपयोग करने योग्य वेब संस्करणों में बदलने के लिए फ़ॉन्ट गिलहरी का उपयोग कर रहा हूं। मैं प्रत्येक वजन को अलग से परिवर्तित नहीं करना चाहता हूं और उन्हें अपने सीएसएस में शामिल करना चाहता हूं (उन सभी कॉलों के साथ ब्लोट का बहुत कुछ जोड़ना होगा)।

क्या एकाधिक वजन एक फ़ॉन्ट में पैकेज करने का कोई तरीका है और सही वर्णों को सही तरीके से कॉल करने के लिए फ़ॉन्ट-वेट गुण का उपयोग करें?

यहां गलत-बोल्ड और अशुद्ध-इटालिक्स से बचने की कोशिश कर रहा है।

Answer 1

सेट (FontSquirrel के डिफ़ॉल्ट उत्पादन के बजाय जहां उन सभी को normal की तैयारी में हैं और वे एक वजन/शैली के बजाय के लिए अलग नाम है) उसके अनुसार अपनी @font-face कॉल में font-weight और font-style गुण, और उन्हें नाम सभी एक ही फॉन्ट।

यहाँ एक साइट से एक उदाहरण है मैं पिछले साल बनाया:

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Book-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Book-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Book-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Book-webfont.svg#CartoGothicStdBook') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Bold-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Bold-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Bold-webfont.svg#CartoGothicStdBold') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-Italic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-Italic-webfont.svg#CartoGothicStdItalic') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'CartoGothic'; 
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot'); 
    src: url('library/fonts/CartoGothicStd-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.woff') format('woff'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.ttf') format('truetype'), 
     url('library/fonts/CartoGothicStd-BoldItalic-webfont.svg#CartoGothicStdBoldItalic') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

ध्यान दें कि FontSquirrel नहीं स्वचालित रूप से कोड एक कारण के लिए इस तरह से उत्पन्न करता है - जो है कि कुछ पुराने ब्राउज़र/उपयोगकर्ता एजेंटों font-weight का समर्थन नहीं करते और font-style@font-face घोषणाओं के अंदर गुण, इसलिए यह विधि का उपयोग करने के लिए अधिक पिछड़ा संगत है जहां आप प्रत्येक वजन और शैली (कार्टोगोथिक रेग्युलर, कार्टोगोथिक बोल्ड, कार्टोगोथिक इटालिक, कार्टोगोथिक बोल्डइटलिक और आगे के लिए अलग-अलग फ़ॉन्ट्स का नाम देते हैं) का उपयोग करने के लिए अधिक पीछे संगत है।

इसके अलावा, FontSquirrel वास्तव में आप के लिए यह कर सकते हैं - अगर आप Webfont जेनरेटर में विशेषज्ञ सेटिंग पर क्लिक करें, वहाँ "सीएसएस" कहा जाता है शैली लिंक के तहत एक विकल्प है जो होगा उन्हें इस प्रारूप में उत्पादन।

Answer 2

यहाँ ग्लानि का जवाब बैकअप लेने के लिए है:

@font-face { 
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font.eot'); 
    src: local('☺'), url('fonts/SF Your Font.woff') format('woff'), url('fonts/SF Your Font.ttf') format('truetype'), url('fonts/SF Your Font.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Bold.eot'); 
    src: local('☺'), url('fonts/SF Your Font Bold.woff') format('woff'), url('fonts/SF Your Font Bold.ttf') format('truetype'), url('fonts/SF Your Font Bold.svg') format('svg'); 
    font-weight: bold; 
    font-style: normal; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Italic.eot'); 
    src: local('☺'), url('fonts/SF Your Font Italic.woff') format('woff'), url('fonts/SF Your Font Italic.ttf') format('truetype'), url('fonts/SF Your Font Italic.svg') format('svg'); 
    font-weight: normal; 
    font-style: italic; 
} 

@font-face {  
    font-family: 'Your Font'; 
    src: url('fonts/SF Your Font Bold Italic.eot'); 
    src: local('☺'), url('fonts/SF Your Font Bold Italic.woff') format('woff'), url('fonts/SF Your Font Bold Italic.ttf') format('truetype'), url('fonts/SF Your Font Bold Italic.svg') format('svg'); 
    font-weight: bold; 
    font-style: italic; 
} 

वहाँ वास्तव में अलग फोंट के निर्माण के चारों ओर कोई रास्ता नहीं है, लेकिन font-weight और font-style विशेषताओं का उपयोग, आप कॉल कम हो जाएगा। आप बस एक बार font-family घोषित करें।