@ फॉन्ट-फेस आईई

Question

EDIT 23-06-2012 10:24 (CET) में https के माध्यम से लोड नहीं होगा: मिले जवाब

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

Original Question:

मैं अब कई घंटों तक इस के साथ संघर्ष कर रहा हूँ। हमारे ग्राहकों में से एक के लिए हमने एक वेबशॉप तैयार किया है और इसे एक सामान्य मानक असुरक्षित http कनेक्शन पर विकसित कर रहा है। 2 दिन पहले, हमने डोमेन पर एक एसएसएल प्रमाण पत्र स्थापित किया है और वेबसाइट के साथ प्रत्येक कनेक्शन को .htaccess

का उपयोग कर https डोमेन पर जाने के लिए मजबूर किया है, लेकिन किसी कारण से, आईई (कोई संस्करण नहीं) फ़ॉन्ट को प्रस्तुत करता है @ फ़ॉन्ट-फेस का उपयोग कर सीएसएस में निर्दिष्ट किया गया है। यहाँ कोड हम फोंट के लिए उपयोग कर रहे हैं पर है:

@font-face { 
    font-family: 'ProximaNovaLight'; 
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot'); 
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'), 
     url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.woff') format('woff'), 
     url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.ttf') format('truetype'), 
     url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.svg#ProximaNovaLight') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

आप मैं https सहित फोंट पूर्ण लिंक का उपयोग कर रहा देख सकते हैं। मैंने SSL प्रमाणपत्र डोमेन से मेल खाने के लिए फ़ाइलों को डोमेन की रूट पर ले जाने का प्रयास किया है। मैंने सीएसएस के भीतर से सापेक्ष पथों का उपयोग करने की भी कोशिश की लेकिन यह भी काम नहीं किया।

सभी फ़ॉन्ट डोमेन पर हैं, उनमें से कोई भी क्रॉस-डोमेन नहीं है।

मैं इसी तरह की समस्याओं का वर्णन करने वाले SO पर 2 अन्य पोस्टों में आया, एक हल नहीं किया गया था, दूसरा था, लेकिन यह एक ही समस्या नहीं प्रतीत होता था। इस मामले में प्रश्न के लेखक को एक्सेस-कंट्रोल-ऑर्डर-ओरिजिन हेडर को woff/ttf/otf/svg के फ़ाइल अनुरोधों में जोड़ना पड़ा। मैं अपने .htaccess करने के लिए इन हेडर जोड़ दिया है बस सुनिश्चित करने के:

<FilesMatch "\.(woff|ttf|otf|svg)$"> 
    <IfModule mod_headers.c> 
     Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
</FilesMatch> 

मैं एक तरह से विकल्प और thoughs से बाहर चल रहा हूँ। मैं कोई सर्वर-कॉन्फ़िगरेशन-प्रकार का लड़का नहीं हूं, लेकिन PHP/MySQL/jQuery में अधिक तो मुझे लगता है कि मेरे विचार एसओ पर दूसरों की तुलना में सीमित हैं।

यदि किसी के पास कोई विकल्प है जो कोशिश करने लायक है, तो बस मुझे बताएं!

UPDATE 22-06-2012:

अगर मैं करने के लिए http https बदल सकते हैं और IE में पेज को ताज़ा, मैं संदेश द्वारा संकेत किया जा रहा है को असुरक्षित सामग्री है कि वहाँ और मैं इस सामग्री को स्वीकार करने का विकल्प है। अगर मैं 'हाँ' चुनता हूं तो मेरी सामग्री लोड हो रही है और ... फ़ॉन्ट उपलब्ध है !! हाँ .. हालांकि .. अगर मैं इसे वापस https में बदलता हूं तो फ़ॉन्ट फिर से गायब हो जाते हैं।

इस प्रकार अब तक मैं कोशिश की है:

सुनिश्चित नहीं हैं कि मैं इस से क्या सीख सकते हैं (lol), लेकिन शायद यह किसी को भी एक छोटे से विचार ..

UPDATE 22-06-2012 #2 देता

यूआरएल ('/ /protocol/relative/font.eot '); यूआरएल ('../ फ़ाइल/रिश्तेदार/font.eot'); यूआरएल ('/ डोमेन/रिश्तेदार/font.eot'); यूआरएल ('https: //www.secure.tld/font.eot'); यूआरएल ('http: //www.normal.tld/font.eot'); (काम करता है लेकिन एक पॉपअप के साथ "आईई में गैर सुरक्षित वस्तुओं को शामिल करना)

मैंने httpM // कनेक्शन में FilesMatch (woff, ttf, otf, eot, svg) को मजबूर करने के लिए एक पुनःलेखन बनाने की भी कोशिश की। यह ' जैसा मैंने सोचा था और मुझे कोई सुराग नहीं मिला है, उसने कुछ भी किया है ..

मैं भी इस कहा:

AddType application/vnd.ms-fontobject .eot 
AddType font/truetype .ttf 
AddType font/opentype .otf 
AddType font/opentype .woff 
AddType image/svg+xml .svg .svgz 

फोंट (बिल्कुल किसी .htaccess फ़ाइलों में) वाले फ़ोल्डर के लिए

रूप में अच्छी तरह मुख्य .htaccess फाइल के रूप में।

इसके अलावा मैंने htpasswd लॉगिन को हटाने का प्रयास किया, यह एक जंगली अनुमान था, लेकिन किसी चीज को भी नहीं बदला।

UPDATE 23-06-2012:

चेक किए गए DirectAdmin सर्वर लॉग .. जाहिरा तौर पर आईई फोंट (मैं questionmark के साथ एक EOT फ़ाइल देखें, मैं अनुमान है कि इस iefix और WOFF अनुरोध किया जा रहा साथ EOT है) अनुरोध कर रहा है। सब कुछ है कि अनुरोध किया है भी के आधार पर एक 200 ठीक हैडर प्रतिक्रिया है, जो मेरे लिए चीजें और अधिक स्पष्ट नहीं बना है ..

फिर भी देख रही है और क्या इस समस्या का कारण बन सकता है के लिए खोज ..

इसके अलावा, हो रही है " एफ 12 कंसोल लॉग "- आईई में सब कुछ। मैं स्पष्ट रूप से देख सकता हूं कि फोंट का अनुरोध किया जा रहा है -ओवर https- 200 ओके प्रतिक्रिया के साथ। अजीब बात यह है कि मैं केवल 4 फ़ॉन्ट्स में से 3 देख रहा हूं, लेकिन संभव है कि चौथाई मुख्य पृष्ठ पर उपयोग नहीं किया जा रहा है।

Answer 1

तो, मैंने अभी तक एक तरीका निकाला है जो आईई, सफारा, फ़ायरफ़ॉक्स और क्रोम के लिए काम कर रहा है, जहां तक ​​मैं देख सकता हूं।

चूंकि मैंने जो भी चीजें कोशिश की थी, वह काम नहीं कर सका, इसलिए मैं अपने वेबसाइट पर, मेरे सीएसएस या मेरे सर्वर पर फोंट को "एम्बेड" कर सकता था। मेरे सर्वर पर फ़ॉन्ट जोड़ा गया मेरे सर्वर-लड़के के अनुसार एक विकल्प नहीं था इसलिए मैंने फ़ॉन्ट-गिलहरी पर वापस जाने का फैसला किया और देखें कि फ़ॉन्ट्स को बदलने में उन्हें एक विकल्प दिया गया था या नहीं।

मैंने अपने फ़ॉन्ट्स को फिर से अपलोड किया और निर्यात मोड चुना। सेटिंग फ़ील्ड्स के नीचे कहीं भी यह "बेस 64 एनकोड" कहता है, सौभाग्य से मुझे पता था कि इसका मतलब क्या है (मैं किसी ऐसे व्यक्ति की कल्पना कर सकता हूं जो आसानी से इस विकल्प को नहीं देखता) इसलिए मैंने बेस सीएसएस फाइलों के साथ मेरी सीएसएस फाइलों को जेनरेट किया।

यह बेकार ढंग से काम करता है। इसने मेरी सीएसएस फाइलों को कुछ केबी की बड़ी (5kb बनाम 12 9 केबी) बना दिया। लेकिन मुझे मौजूदा इंटरनेट कनेक्शन के साथ 100kb अतिरिक्त का बड़ा रोमांच नहीं दिख रहा है।

बस तुलना करने के लिए, गैर बेस 64 इनकोडिंग सीएसएस:

@font-face { 
    font-family: 'ProximaNovaSemibolds'; 
    src: url('../font-face/proximanova-semibold-webfont.eot'); 
    src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../font-face/proximanova-semibold-webfont.woff') format('woff'), 
     url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'), 
     url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Base64 इनकोडिंग सीएसएस:

@font-face { 
    font-family: 'ProximaNovaBold'; 
    src: url('proximanova-bold-webfont-webfont.eot'); 
    } 

@font-face { 
    font-family: 'ProximaNovaBold'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'), 
     url('proximanova-bold-webfont-webfont.ttf') format('truetype'), 
     url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 

Answer 2

आप इसे Webfont-Loader, और Typkit गूगल द्वारा विकसित का उपयोग कर काम करने के लिए मिल सकता है:

यह कुछ भूमि के ऊपर जोड़ने के लिए, लेकिन आप (वर्गों है कि आप जबकि विभिन्न शैलियों निर्धारित करने की अनुमति की तरह फॉन्ट लोडिंग से अधिक भी अधिक नियंत्रण देता है फोंट अभी तक लोड नहीं हुए हैं)। शायद यह एक कोशिश के लायक है, setup for your own css seems to be simple।

Answer 3

मैं IE और https के साथ बिल्कुल वैसा ही व्यवहार किया था। आईई ने 4 फोंटों में से 3 लोड करने की कोशिश की लेकिन जैसे ही सर्वर ने संसाधन वितरित किया, आईई टूट गई और अगले फ़ॉन्ट पर चली गई। अंत में कोई फ़ॉन्ट लोड नहीं हुआ था और साइट खराब दिख रही थी। मेरे मामले में http शीर्षलेख "pragma = no-cache" वह चीज़ थी जो आईई को उलझन में डालती थी। प्रतिक्रिया से इसे हटाने के बाद, सब कुछ सुचारू रूप से काम किया।यह भी देखें मेरे ब्लॉग प्रविष्टि है जिसके साथ चाल बताते हैं Wildfly और अंडरटो: Blog

अद्यतन:

इस बीच मैं माइक्रोसॉफ्ट में एक बग खोला कनेक्ट में: https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache

आप उन्हें इस समस्या को ठीक करना चाहते हैं, कृपया बग के लिए वोट दें।

Answer 4

निश्चित रूप से एक ही समस्या है। आईई का एक संयोजन (हमारे मामले संस्करण में 11/ट्राइडेंट 7) बग तब होता है जब सभी शर्त को पूरा:

HTTPS, कोई कैश हेडर

कुछ डोमेन है कि अलग से प्रशासित रहे हैं, यह नहीं करने के लिए एक आसान समस्या है वैकल्पिक हल

Answer 5

अपाचे/2.2.15 के लिए काम कर रहे समाधान भी https

के लिए .htaccess इसके रोकता फ़ॉन्ट कैशिंग फ़ाइलों को जोड़ने के लिए है

<FilesMatch "\.(woff)$"> 
    Header unset Cache-control 
</FilesMatch> 

<FilesMatch "\.(eot)$"> 
    Header unset Cache-control 
</FilesMatch> 

Answer 6

निर्धारित न करें https

01 को अनुरोध हेडर वैरी

नहीं फॉन्ट लोड हो रहा है

Vary:Accept-Encoding,https 

वर्क्स

Vary:Accept-Encoding 

एक ही जवाब here।