@ फॉन्ट-फेस src: लोकल - लोकल फॉन्ट का उपयोग कैसे करें यदि उपयोगकर्ता के पास पहले से ही है?


83

उपयोग करने का सही तरीका क्या है @font-faceताकि यदि उपयोगकर्ता के पास पहले से ही ब्राउज़र है तो वह फॉन्ट डाउनलोड नहीं करेगा?

मैं DejaVu को परिभाषित करने के लिए @ फ़ॉन्ट-फेस का उपयोग कर रहा हूं, जो पहले से ही मेरे सिस्टम (लिनक्स) पर स्थापित है। फ़ायरफ़ॉक्स फ़ॉन्ट डाउनलोड नहीं कर रहा है, लेकिन क्रोमियम इसे हर बार डाउनलोड कर रहा है!

मेरा सीएसएस कोड, फ़ॉन्ट गिलहरी पर आधारित है और यह प्रश्न इस तरह दिखता है:

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-webfont.eot');
    src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ... @font-face definitions for italic and bold omitted ... */

@font-face {
    font-family: 'DejaVu Serif';
    src: url('DejaVuSerif-BoldItalic-webfont.eot');
    src: local('DejaVu Serif Bold Italic'), url('DejaVuSerif-BoldItalic-webfont.woff') format('woff'), url('DejaVuSerif-BoldItalic-webfont.ttf') format('truetype'), url('DejaVuSerif-BoldItalic-webfont.svg#webfontQAewh7pf') format('svg');
    font-weight: bold;
    font-style: italic;
}

जवाबों:


104

यदि आप पहले स्थानीय फ़ाइलों की जांच करना चाहते हैं:

@font-face {
font-family: 'Green Sans Web';
src:
    local('Green Web'),
    local('GreenWeb-Regular'),
    url('GreenWeb.ttf');
}

यहाँ क्या करना है, इसका अधिक विस्तृत वर्णन है


3
क्या होगा अगर हमारे पास 2 srcएस है (ओपी के उदाहरण के रूप में)? क्या हम localपहले या दूसरे पर डालते हैं ?
एमपीएन

-7

मैंने वास्तव में कुछ भी नहीं किया है font-face, इसलिए इसे एक चुटकी नमक के साथ लें, लेकिन मुझे नहीं लगता कि ब्राउज़र के लिए कोई तरीका है कि किसी उपयोगकर्ता की मशीन पर स्थापित वेब फ़ॉन्ट स्थापित किया जा सके या नहीं।

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

क्या फ़ायरफ़ॉक्स फ़ॉन्ट डाउनलोड करता है जब आप वास्तव में fontघोषणा में इसका उपयोग करते हैं ? (जैसे h1 { font: 'DejaVu Serif';)?


ठीक है, फ़ॉन्ट नामों का मुद्दा यहां छोटे प्रभाव का है, मुझे लगता है (मुझे इसके साथ कोई समस्या नहीं थी)
थारामा

हाँ मुझे लगता है कि टकराव की संभावना नहीं है। लगे रहो।
पॉल डी। वेट

5
css में font / font-family किसी ब्राउज़र को डाउनलोड नहीं करता है। यदि इसे स्थानीय रूप से फ़ॉन्ट नहीं मिलता है, तो यह इसे अनदेखा करता है। इसलिए आमतौर पर हम एक फॉन्ट स्टैक (फोंट की एक सूची) का उपयोग करते हैं - यदि इसमें पहला नहीं है, तो यह दूसरा और इसी तरह का प्रयास करता है। @ फ़ॉन्ट-चेहरा कुछ अपेक्षाकृत "नया" है ( stackoverflow.com/questions/2219916/is-font-face-usable-now )
dbarbosa

@ डार्बोसा: मुझे पता है कि कैसे font/ font-familyकाम करते हैं। मैं स्पष्ट रूप से नहीं जानता कि कैसे @font-faceकाम करता है!
पॉल डी। वेट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.