नई बुलेटप्रूफ @ फॉन्ट-फेस क्रम में साथ कम्पास

Question

में डाटा यूआरआई का उपयोग कर

मैं कम्पास का उपयोग कर रहा 'font-face mixin inline-font-files और font-files साथ वाक्य रचना The New Bulletproof @Font-Face Syntax की तर्ज WOFF, ttf और otf फ़ाइलों के लिए Data URIs का उपयोग कर के साथ कुछ बनाने के लिए।

मैं ईट के लिए सापेक्ष यूआरएल (डेटा यूआरआई के लिए आईई समर्थन की कमी के कारण) और एसवीजी फाइलों के लिए उपयोग करता हूं, (#FontName हैश मुझे लगता है) के कारण। ईओटी फ़ाइल में कोई समस्या नहीं है क्योंकि इसके लिए पैरामीटर है, लेकिन क्योंकि font-face कम्पास में व्यवहार करता है svg अन्य प्रारूपों से अलग नहीं है, मैं फ़ॉन्ट डेटा को शामिल करने के लिए inline-font-files का उपयोग नहीं कर सकता, क्योंकि इससे svg संस्करण इनलाइन भी बन जाएगी।

वहाँ नीचे की तरह font-face वापसी कुछ बनाने के लिए एक रास्ता है:

@font-face { 
    font-family: 'PTSans'; 
    src: url('pts55fwebfont.eot'); 
    src: url('pts55fwebfont.eot?#iefix') format('embedded-opentype'), 
     url('data:WOFF_DATA') format('woff'), 
     url('data:TTF_DATA') format('truetype'), 
     url('pts55fwebfont.svg#PTSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

बात मैं समझ नहीं कैसे, जबकि अभी भी svg की इजाजत दी WOFF, otf और ttf संस्करणों डाटा URI का उपयोग करने के लिए है एक मानक यूआरएल का उपयोग करने के लिए संस्करण। सबसे अच्छा मैं इसके साथ आया हूं:

@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), 'ptsans/pts55fwebfont.eot', normal, normal); 
@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular'), $weight: normal, $style: normal); 

जो svg को अपने स्वयं के @ फ़ॉन्ट-चेहरे में तोड़ देगा। क्या वह वैध सीएसएस उसी खाते पर है जिसे मैं अलग-अलग वजन और शैलियों का उपयोग करके एक ही परिवार के नाम के साथ एकाधिक @ फ़ॉन्ट-फेस नियम बना सकता हूं? यदि ऐसा है, तो क्या यह उपरोक्त उदाहरण सीएसएस के रूप में उतना ही अच्छा काम करेगा (ऐसा प्रतीत होता है)? और, ज़ाहिर है, क्या यह कम्पास/सास में इसे पूरा करने का एक बेहतर तरीका है?

Answer 1

रुचि रखने वालों के लिए, प्रश्न में उल्लिखित कामकाज बहुत अच्छी तरह से काम करता प्रतीत होता है। मानक url() का उपयोग कर डेटा यूआरआई @ फ़ॉन्ट-फेस नियम से ईओटी फ़ाइल विशेषता को स्थानांतरित करना शायद एक अच्छा विचार है। यह कभी-कभी डेटा प्रदर्शित होता है: यूआरएल जेनरेट बहुत लंबा होता है, जो पूरे @ फ़ॉन्ट-फेस नियम को तोड़ देता है। साथ ही, सुनिश्चित करें कि डेटा यूआरआई नियम आखिरी बार लोड हो गया है, क्योंकि फ़ायरफ़ॉक्स 5 और ऊपर केवल अंतिम नियम का सामना करना प्रतीत होता है। इसलिए, पिछले शासन में इनलाइन फोंट (WOFF, ttf, otf) और पहली में जुड़े हुए फोंट (svg, EOT) रखें ताकि तरह:

@include font-face('PTSans', font-files('ptsans/pts55fwebfont.svg#PTSansRegular') 'ptsans/pts55fwebfont.eot', normal, normal); 
@include font-face('PTSans', inline-font-files('ptsans/pts55fwebfont.woff', woff, 'ptsans/pts55fwebfont.ttf', truetype), $weight: normal, $style: normal); 

Answer 2

अद्यतन। मैं acutally Bourbon mixin साइट से एक महान थोड़ा mixin प्रयोग किया है:

// Bourbon Mixin for top notch webfont support: https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_font-face.scss 
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) { 
    @font-face { 
     font-family: $font-family; 
     src: url('#{$file-path}.eot'); 
     src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), 
      url('#{$file-path}.woff') format('woff'), 
      url('#{$file-path}.ttf') format('truetype'), 
      url('#{$file-path}.svg##{$font-family}') format('svg'); 
     font-weight: $weight; 
     font-style: $style; 
    } 
} 

// Bourbon Mixin webfont setup: http://thoughtbot.com/bourbon/#font-face 
@include font-face(ProximaNova, 'fonts/proximanova_semibold_macroman/ProximaNova-Sbold-webfont'); 
@include font-face(ProximaNova, 'fonts/proximanova_bold_macroman/ProximaNova-Bold-webfont', bold); 
@include font-face(ProximaNova, 'fonts/proximanova_semibolditalic_macroman/ProximaNova-SboldIt-webfont', normal, italic); 

Answer 3

यह mixin काफी सूट डेटा यूआरआई के संबंध में मेरी जरूरतों:

@mixin fontspring-font-face($family, $file, $svg_hash: $file, $weight: false, $style: false) { 

    @font-face { 
     font-family: quote($family); 
      src: font-files("#{$file}.eot"); 
      src: font-files("#{$file}.eot?#iefix") format('eot'), inline-font-files("#{$file}.woff", woff, "#{$file}.ttf", truetype), font-files("#{$file}.svg##{$svg_hash}") format('svg'); 

      @if $weight { 
       font-weight: $weight; 
      } 
      @if $style { 
       font-style: $style; 
      } 
    } 
} 

: कुछ प्रारूपों और http दूसरों के लोड करने के लिए रों संपादित करें: मुझे शायद यह जोड़ना चाहिए कि उत्पन्न सीएसएस में आईई में तोड़ने की प्रवृत्ति है। अधिकतर इनलाइन-फ़ॉन्ट-फाइलों द्वारा बड़ी फ़ाइलों के कारण शामिल होने की वजह से, एक अमान्य url(data:) मान होता है जो बदले में पूरे src संपत्ति को अमान्य प्रस्तुत करता प्रतीत होता है। ऐसा लगता है कि एक अलग सीएसएस निर्देश में डेटा यूआरआई संस्करणों को रखने का सबसे अच्छा समाधान है।