क्रोम कॅनरी ब्राउझरमध्ये तुटलेले फॉन्ट: बगचे निराकरण कसे करावे. CORS म्हणजे काय

या साइटवर मी सध्या माझ्या सर्व्हरवर संग्रहित वेबफॉन्ट वापरून कोडिंग करत आहे. प्रत्येक ब्राउझर त्यांना अगदी छान प्रस्तुत करतो, परंतु chrome असे करत नाही. Chrome त्याऐवजी Times New Roman वापरते. chrome वर विकसक साधने तपासल्यानंतर, मला आढळले की ते सर्व्हरवरून ARE फॉन्टची विनंती करत आहेत आणि यशस्वीरित्या काढले जात आहेत. काही कारणास्तव Chrome ते वापरत नाही. माझ्या लक्षात आले की जर मी माझ्या संगणकावर फॉन्ट स्थापित केले (विंडोज, बीटीडब्ल्यू वापरून), ते अचानक क्रोमसह कार्य करण्यास सुरवात करते.

फॉन्टचे माझे वाचन येथे आहे:

@font-face (font-family: "BNLunch"; src: url("BN_Lunch.eot"); src: url("BN_Lunch.eot?#iefix") फॉरमॅट("एम्बेडेड-ओपनटाइप"), url("BN_Lunch .woff") स्वरूप("woff"), url("BN_Lunch.ttf") स्वरूप("truetype"), url("BN_Lunch.svg#BNLunchregular") स्वरूप("svg"); फॉन्ट-वजन: सामान्य; फॉन्ट -शैली: सामान्य)

काही कल्पना?

संपादित करा: मी हे नमूद करायला विसरलो की हे विशिष्ट CSS इतर फॉन्टसह कार्य करते. फक्त हा विशिष्ट फॉन्ट आणि BNMadregot मला समस्या देत आहेत. कदाचित या फॉन्टची इंग्रजी अक्षरे रिकामी आहेत म्हणून?

2 उत्तरे

फॉन्ट तुटलेला आहे (फॉन्टस्क्विरल तुम्हाला सांगितल्याप्रमाणे). ते वापरू नका. तुम्ही नमूद केलेल्या साइटवरून मी BN Lunch डाउनलोड केले आहे आणि font-face-generator.com वापरून त्यावर प्रक्रिया केली आहे, आणि test.html हे पृष्ठ त्या फॉन्टमधील अक्षरे दाखवत नाही (आणि हो, मी साधे संख्या आणि हिब्रू अक्षरे देखील वापरून पाहिली आहेत. ) क्रोम किंवा Firefox मध्ये, फक्त IE मध्ये (Win 7 वर चाचणी केली). क्रोम डेव्ह टूल्स दाखवतात की क्रोम फॉन्ट फाइल्स प्राप्त करत आहे आणि एरर सिग्नल करत नाही, त्यामुळे अंतर्गत फॉन्ट टेबल्स तुटलेली दिसतात (उदा. चुकीची कॅरेक्टर कव्हरेज माहिती). ती वितरीत करणारी साइट अनेक बेकायदेशीर फॉन्ट वितरण साइट्सपैकी एक संशयास्पद दिसते; उदाहरणार्थ, फॉन्टच्या लेखकांचा किंवा कॉपीराइटचा कोणताही उल्लेख केलेला नाही.

तर, दुसरा फॉन्ट मिळवा.

माझ्याकडे असाच CSS कोड आहे जो प्रत्येक ब्राउझरमध्ये अगदी क्रोममध्येही ठीक काम करतो.

@font-face ( font-family: "standard 07_58"; src: url("../fonts/standard_07_58/stan0758.eot?") फॉरमॅट("eot"), url(../fonts/standard_07_58/stan0758 .woff") फॉरमॅट("woff"), url("../fonts/standard_07_58/stan0758.ttf") फॉरमॅट("truetype"), url("../fonts/standard_07_58/stan0758.svg#Standard0758") स्वरूप("svg"); फॉन्ट-वजन: सामान्य;

तुमच्या CSS मध्ये काही फरक आहेत, त्यामुळे या पॅटर्नचे अनुसरण करून पहा आणि काय होते ते पहा.

Google Chrome फॉन्ट बदलला आहे (4)

गुगल क्रोममध्ये अप्रतिम आयकॉन फॉन्ट दाखवत नसल्याचे आत्ताच अनेक साइट्सवर लक्षात आले. कन्सोल खालील त्रुटी दाखवते:

कोणत्याही मदतीबद्दल/स्पष्टीकरणाबद्दल धन्यवाद!

फॉन्ट ऍक्सेस करण्याची ही समस्या - आश्चर्यकारक मालमत्ता ही बर्याच लोकांसाठी समस्या आहे ज्याचे सर्वसमावेशक स्पष्टीकरण आणि समस्येचे निराकरण न करता.

CORS म्हणजे काय:

कॉपी रिसोर्स शेअरिंग (CORS) ही एक यंत्रणा आहे जी वापरकर्ता एजंटला सध्या वापरल्या जात असलेल्या साइटपेक्षा वेगळ्या मूळ (डोमेन) सर्व्हरवरून निवडलेल्या संसाधनांमध्ये प्रवेश करण्याची परवानगी देण्यासाठी अतिरिक्त HTTP शीर्षलेख वापरते. वापरकर्ता एजंट जेव्हा वर्तमान दस्तऐवजाचा उगम झाला त्यापेक्षा वेगळ्या डोमेन, प्रोटोकॉल किंवा पोर्टवरून संसाधनाची विनंती करतो तेव्हा तो क्रॉस-ओरिजिन HTTP विनंती करतो.

समस्या:

समस्या फॉन्ट-आश्चर्यकारक फॉन्ट लोड करण्याच्या पद्धतीशी संबंधित आहे.

@font-face(font-family:"FontAwesome"; src:url("../fonts/fontawesome-webfont.eot?v=4.2.0"); src:url(../fonts/fontawesome-webfont .eot?#iefix&v=4.2.0") स्वरूप("एम्बेडेड-ओपनटाइप"), url(../fonts/fontawesome-webfont.woff?v=4.2.0") स्वरूप("woff"),url( "../fonts/fontawesome-webfont.ttf?v=4.2.0") फॉरमॅट("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") फॉरमॅट ("svg"); फॉन्ट-वजन:सामान्य;

फॉन्ट स्टाईल शीट (CSS) द्वारे लोड केले जातात. आमच्याकडे येथे परिस्थिती आहे:

उपाय:

जरी CORS नियम तुमच्या फाइल स्टोरेजमध्ये तयार केले गेले आहेत, जसे की S3, आणि दिलेल्या डोमेनला संसाधनाचा प्रवेश मंजूर केला गेला आहे, जेव्हा CDN CSS मध्ये निर्दिष्ट केलेले फॉन्ट डाउनलोड करण्याचा प्रयत्न करते, तेव्हा ते डाउनलोड करताना निर्दिष्ट स्त्रोत/डोमेन फॉन्ट CDN कडून आहेत, परंतु CORS प्रवेश CDN डोमेनला प्रदान केलेला नाही.

तुमच्या CDN डोमेनसाठी CORS नियम तयार करा.

मी एक CDN वापरत आहे जे मला त्याचे उत्तर सुधारण्याची परवानगी देत ​​नाही, म्हणून मी font-awesome.min.css मध्ये रिलेटिव पाथ बदलून निरपेक्ष मार्ग बदलला आणि तो कार्य करत आहे.

समस्या CSS फाईलमध्ये नाही, परंतु फॉन्ट फाइलसह कार्य करण्याच्या पद्धतीमध्ये आहे. font-awesome.min.css फाइलमध्ये सारख्या ओळी आहेत

@font-face(font-family:"FontAwesome"; src:url(../fonts/fontawesome-webfont.eot?v=4.2.0"); src:url(../fonts/fontawesome-webfont .eot?#iefix&v=4.2.0") स्वरूप("एम्बेडेड-ओपनटाइप"), url(../fonts/fontawesome-webfont.woff?v=4.2.0") स्वरूप("woff"),url( "../fonts/fontawesome-webfont.ttf?v=4.2.0") फॉरमॅट("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") फॉरमॅट ("svg"); फॉन्ट-वजन:सामान्य;

जे ब्राउझरला CSS फाइल सारख्याच सर्व्हरवरून संबंधित फॉन्ट फाइल (eot, woff, ttf किंवा svg) विनंती करण्यास भाग पाडते. हे तार्किक आणि बरोबर आहे.

तथापि, जेव्हा ब्राउझर cdn.keywest.life वरून या फॉन्ट फाइलची विनंती करतो, तेव्हा ते Access-Control-Allow-Origin हेडर हेडर वाचते आणि ते सापडत नाही, म्हणून तो हा त्रुटी संदेश देतो. (हे मला ब्राउझर बगसारखे दिसते कारण ते CSS फाइल सारख्याच सर्व्हरवरून येते).

त्याऐवजी, जेव्हा तुम्ही maxcdn.bootstrapcdn.com वापरता तेव्हा प्रतिसादामध्ये Access-Control-Allow-Origin:* शीर्षलेख समाविष्ट असतो आणि ब्राउझर ती फॉन्ट फाइल स्वीकारतो. तुमच्या सीडीएन सर्व्हरवर हे शीर्षलेख समाविष्ट असल्यास, ते देखील कार्य करेल.

तुमच्याकडे Apache सर्व्हर असल्यास, हे उत्तर पहा: Firefox मध्ये फॉन्ट-विस्मयकारक रेंडरिंग योग्यरित्या होत नाही / CDN द्वारे विक्री कशी करावी?

नवीन विंडोज पीसीवर Google Chrome कॅनरी ब्राउझरच्या चाचणी स्थापनेनंतर, ब्राउझरच्या इंटरफेसमध्ये आणि त्यामध्ये उघडलेल्या साइट्सवर तुटलेले फॉन्ट सापडले.

हे कोणतेही रहस्य नाही की प्रस्तुतीकरण नेहमीच आदर्श नाही, परंतु आम्हाला या विशिष्ट मशीनवर अशा घटनेची अपेक्षा नव्हती, कारण आम्ही Chrome स्थिर आवृत्त्यांसह असे काहीही पाहिले नाही.

पण मला करावं लागलं...

खालील स्क्रीनशॉटमध्ये नमूद केलेली समस्या बाहेरून कशी दिसत होती ते तुम्ही पाहू शकता. आम्ही स्थापनेनंतर लगेच वरचा भाग बनविला , आणि खालचा - बग निश्चित केल्यानंतर. आणि कृपया लक्षात ठेवा, हे सेटिंग्ज मेनू पृष्ठ आहे (तथाकथित chrome://flags पृष्ठ).

अर्थात, आम्ही असेही गृहीत धरले आहे की या घटनेचे एक कारण हे असू शकते की कॅनरी ही ब्राउझरची नवीनतम आवृत्ती आहे आणि कदाचित अद्याप काहीतरी अंतिम केले जात आहे आणि त्यात रीमेक केले जात आहे जे अद्याप Chrome च्या स्थिर आवृत्तीमध्ये देखील नाही.

तथापि, पुढील प्रतिबिंबामुळे ही समस्या संगणकाच्या स्वतःच्या हार्डवेअर आणि/किंवा त्यावर स्थापित केलेल्या ड्रायव्हर्सद्वारे देखील यशस्वीरित्या तयार केली जाऊ शकते अशी कल्पना आली. याव्यतिरिक्त, विषयावरील माहितीच्या आनुषंगिक "गुगलिंग" वरून असे दिसून आले की वापरकर्त्यांमध्ये वेळोवेळी असेच प्रश्न उद्भवले आहेत. Chrome 3.

आणि दोष दूर करण्यासाठी वापरल्या जाणाऱ्या पद्धती देखील खूप भिन्न होत्या, विशेषतः अक्षम करणे किंवा DirectWrite, विविध प्रारंभिक पॅरामीटर्ससह Chrome लाँच करणे, इ. जवळजवळ सर्वच वर्षे जुने आहेत, अर्थातच, आणि यापुढे ब्राउझरच्या नवीनतम आवृत्त्यांसाठी संबंधित नाहीत. परंतु काही "क्लासिक" जसे की ते बाहेर आले, त्यांची पूर्वीची प्रभावीता गमावलेली नाही. तर,..

Google Chrome Canary मध्ये तुटलेले फॉन्ट दिसल्यास काय करावे:

• वर जा " सेटिंग्ज "(माध्यमातून chrome://settings/किंवा द्वारे " मेनू«);
• पृष्ठाच्या तळाशी स्क्रोल करा आणि "क्लिक करा अतिरिक्त «;
• नंतर पृष्ठावर पुन्हा स्क्रोल करा " प्रणाली«;
• आणि त्यात आम्ही फंक्शन अक्षम करतो " हार्डवेअर प्रवेग वापरा (उपलब्ध असल्यास) «;
• Chrome रीस्टार्ट करा.

त्यानंतर, तुटलेले फॉन्ट स्वतःला "दुरुस्त" केले. परंतु हे देखील लक्षात घेण्यासारखे आहे की या विशिष्ट परिस्थितीत हार्डवेअर प्रवेग कार्य अक्षम करणे हे दोन वाईट गोष्टींपैकी कमी समजले जावे, कारण हे बऱ्याच प्रकरणांमध्ये ब्राउझरच्या कार्यक्षमतेवर नकारात्मक परिणाम करू शकते (अधिक स्पष्टपणे, विशिष्ट कार्ये करताना). तथापि, दिलेल्या क्रियांच्या अल्गोरिदमची पुनरावृत्ती करून तुम्ही कधीही फंक्शन सक्षम करू शकता.