@ फ़ॉन्ट-फेस घोषणा को बाईपास करना जो "हेल्वैटिका" फ़ॉन्ट परिवार को ओवरराइड करता है

मेरे पास एक बुकमार्कलेट है जो किसी भी साइट के पृष्ठों में विजेट डालता है। क्योंकि ब्राउज़र मानचित्रण Helvetica है@ फ़ॉन्ट-फेस घोषणा को बाईपास करना जो "हेल्वैटिका" फ़ॉन्ट परिवार को ओवरराइड करता है

@font-face { 
    font-family: "helvetica"; 
    src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"), 
     url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"), 
     url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"), 
     url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg"); 
}

विजेट है कि मेरे बुकमार्कलेट आवेषण हर जगह और यह एक साइट पर यह भयानक लग रहा है Helvetica उपयोग करता है: विजेट का स्टाइल निम्नलिखित सीएसएस @font-face घोषणा है कि एक निश्चित साइट से टूट किया जा रहा है मानक हेल्वैटिका सिस्टम फ़ॉन्ट की बजाय @font-face उस नाम की घोषणा के लिए।

प्रश्न: क्या यह @font-face घोषणा को ओवरराइड/बाईपास करने का कोई तरीका है या कोई अन्य @font-face घोषणा है जो सिस्टम हेल्वैटिका फ़ॉन्ट पर मानचित्र करता है?

स्रोत

2012-06-12 Tautologistics

@PerSalbark: आप :) – thirtydot

जब तक स्टाइलशीट !important अपने विजेट के स्टाइलशीट के बाद साथ स्टाइलशीट का हवाला यह ओवरराइड करता है, इस काम कर सकता था:

@font-face { 
    font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */ 
    src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */ 
} 
.your-widget { 
    font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything 
in your widget use the "proper" Helvetica and if the user doesn't have it, 
use the site's helvetica. */ 
}

स्रोत

2012-06-12 15:44:04

भले ही मैंने अपने स्वयं के प्रश्न का उत्तर दिया, मैं आपका स्वीकार करूंगा क्योंकि यह पहला गैर-स्वयं पोस्ट समाधान था =) – Tautologistics

जैसे ही मैंने यह प्रश्न सबमिट किया, मुझे कुछ प्रेरणा मिली। क्या मैं काम करता पाया निम्नलिखित है ...

एक निम्नलिखित सीएसएस नियम बनाएं:

@font-face { 
    font-family: 'RealHelvetica'; 
    src: local('helvetica'); 
}

तत्वों असली Helvetica सिस्टम फ़ॉन्ट 'RealHelvetica' के रूप में font-family निर्दिष्ट करने के बजाय सिर्फ आवश्यकता है कि में Helvetica:

.widget { 
    font-family: 'RealHelvetica',helvetica,sans-serif !important; 
}

स्रोत

2012-06-12 15:34:29 Tautologistics

आप एक कस्टम फ़ॉन्ट ऐसा नाम है जो एक स्थानीय स्थापित फ़ॉन्ट के नक्शे बनाने के लिए निम्नलिखित सीएसएस जोड़ सकते हैं:

@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica"); 
}

विजेट का स्टाइल आप इस का उपयोग करना चाहिए के लिए:

font-family: mycustomuniquefontname, Helvetica, sans-serif;

आपको बोल्ड और इटैलिक रूप में और अधिक फ़ॉन्ट शैली का उपयोग कर रहे हैं, तो आप उन सभी को परिभाषित करने के लिए है: लपेटें

@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica"); 
} 
@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica Bold"); 
    font-weight: bold; 
} 
@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica Italic"); 
    font-style: italic; 
} 
@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica Bold Italic"); 
    font-weight: bold; 
    font-style: italic; 
}

स्रोत

2012-06-12 15:37:14 ausi

अपने एक आईफ्रेम में विजेट। पता नहीं कि यह सबसे अच्छा समाधान है, लेकिन यह एक समाधान है।

http://jsfiddle.net/bwcNX/

var $frame = $('<iframe style="width:200px; height:100px;">'); 
$('body').append($frame); 
setTimeout(function() { 
    var $doc = $($frame[0].contentWindow.document.documentElement); 
    $doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>"); 
    $doc.find('div').append('<div>ghi.</div>'); 
}, 1);

बोनस: भविष्य सबूत अधिकांश अन्य सीएसएस या फ़ॉन्ट से संबंधित समस्याओं के खिलाफ अपने विजेट चाहिए।

स्रोत

2012-06-12 15:39:18

झपकी से पहले बहुत बढ़िया बात यह हटा दिया जाएगा लेकिन कार्यक्षमता/मेरे विजेट की बातचीत एक आईफ्रेम का उपयोग करने से रोकती है। सामान्य रूप से, यह व्यवहार्य विकल्प होगा। – Tautologistics

@ फ़ॉन्ट-फेस घोषणा को बाईपास करना जो "हेल्वैटिका" फ़ॉन्ट परिवार को ओवरराइड करता है

उत्तर

संबंधित मुद्दे