@font_face समस्या

Question

सीएसएस की शुरुआत में घोषित किए गए फ़ॉन्ट को कॉल करने में यह समस्या मुझे एक दिन के लिए परेशान कर रही है। मैंने कई संसाधनों की जांच की है और कोड ठीक लगता है, लेकिन शायद मुझे कुछ याद आ रहा है। मैंने @font चेहरे में डाल दिया है और इसे अपने एच 1 शीर्षलेख में उपयोग करने का प्रयास किया है लेकिन यह काम नहीं करता है।

अग्रिम धन्यवाद दोस्तों।

एचटीएमएल

    <!DOCTYPE html>

<HTML>
<HEAD>
<TITLE>Photoblog</TITLE>

<link rel="stylesheet" href="css/style.css" type="text/css"/>  
</HEAD>
<BODY>



<div id="container">  

<header>
    <H1>Howard Tang</H1>
</header>

</div>

<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>

<div id='container'>

    <aside>
    <h2>About Me</h2>
    <p>Hello here is some placeholder text.Hello here is some placeholder text.Hello here is some placeholder text.</p>
    </aside>

    <article>
    <h2>Welcome:</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu. 
    Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue. 
    Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
    Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus 
    id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac 
    turpis. </p>    
    <img src="pic1.jpg" alt="Angry face" class="resize"/>
    </article>

    <article>
    <h2>First Impressions</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu. 
    Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue. 
    Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
    Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus 
    id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac 
    turpis. </p>    
    <img src="pic2.jpg" alt="Angry face" />

    </article>

    <article>
    <h2>Bro</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et eros justo, quis consectetur arcu. 
    Etiam vel orci massa, vel vestibulum ante. Nam posuere luctus iaculis. In id augue augue. 
    Integer vel massa purus, sit amet tincidunt sapien. Integer sit amet adipiscing risus. 
    Praesent rhoncus mauris mattis justo mattis eget egestas augue interdum. Curabitur tempus accumsan lacus 
    id accumsan. Nulla fermentum, purus a tempus tristique, diam nibh porttitor felis, et aliquet nunc nisl ac 
    turpis. </p>
    <img src="pic3.gif" alt="Angry face" />
    </article>

<footer>
    <p>By Howard Tang</p>
    </footer>

</div>


</BODY>
</HTML>

सीएसएस:

@font-face {
    font-family: 'Blackout';
    src: url('fonts/Blackout2.ttf');
    font-weight: normal;
    font-style: normal;
}


body {
background-color:#F2E9E1;
color : #111111;
font-family : "Arial", "helvetica", sans-serif;
font-size : 11pt;
}

header h1 {
background-color: #1C140D;
color: #ffffff;
display:block;
height: 80px;
width: 900px;
text-align : left;
line-height: 80px ;
font-size: 60px;
font-family:'Blackout',Sans-Serif;
margin-bottom: 0px;
}

nav ul {

list-style : none;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px;
padding-left: 0px;
text-align : center;
}

nav ul li {
color : #111111;
margin: 0px;
display : block;
}

nav {
width:1900px;
align:center;
background-color:#F2E9E1;
margin-top: 20px;
margin-left: 0px;
padding: 0 0 0 0;
}

nav a {
color : #111111;
}

nav ul li {
display : inline;
}

article {
background-color: #CBE86B;
float: left;
padding: 20px 20px 40px;
width: 560px;
height: 560px;
}

article img {
float: left;
height : 350px;
width : 550px;
}

aside {
    background-color: #1C140D;
    color: #CBE86B;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
    width: 260px;
    height: 1840px;
    padding-top: 20px;
}

#container {
width : 900px;
margin : 0 auto;
}

footer  {
margin-top: 20px;
text-align: left;
}

css fonts types font-face

0

user808985 5 अगस्त 2011, 17:12

आप किस ब्राउज़र में परीक्षण कर रहे हैं? उदाहरण के लिए, जहां तक मुझे याद है, IE .ttf का समर्थन नहीं करता है।

–

Widor

5 अगस्त 2011, 17:17

2

Fontsquirrel की @font-face जनरेटर स्क्रिप्ट का उपयोग करने का प्रयास करें। वे आपके लिए ऑटोहिंटिंग, जीएएसपी-टेबल फिटिंग, स्केलिंग और रैपिंग करते हैं - आउटपुट फाइलों का एक समूह है, जो संयोजन में, अधिकांश ब्राउज़रों पर काम करता है। ब्लैकआउट की यहां एक प्रीपैकेज्ड किट है: fontsquirrel.com/fontfacekit/Blackout

–

sk29910

5 अगस्त 2011, 17:23

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

–

user808985

5 अगस्त 2011, 17:34

@sebastian_k: फ़ॉन्ट गिलहरी! यह देखकर अच्छा लगा कि इसकी सिफारिश की जा रही है।

–

Bojangles

5 अगस्त 2011, 17:41

1

क्या आपने अपने पृष्ठ में डेमो को लागू करने के बजाय अपने पृष्ठ को चरण दर चरण डेमो में लागू करने का प्रयास किया है? शायद इस तरह आप देखेंगे कि समस्या का कारण क्या है :)

–

sk29910

5 अगस्त 2011, 19:03

Answer 1

यह पता चला कि समस्या यह थी कि फॉन्ट फेस src पाथिंग स्टाइलशीट फ़ाइल के सापेक्ष है। तो मेरे फोंट वास्तव में गलत फ़ोल्डर में थे, जिसका मतलब था कि कोड ठीक था लेकिन यह एक साधारण पथ त्रुटि थी।

मैंने कुछ दिनों की निराशा के बाद इसे समझ लिया और फिर से यह साधारण गलती नहीं करूँगा, मदद करने वाले सभी लोगों के लिए धन्यवाद।

0

user808985user808985 8 अगस्त 2011, 17:50

Answer 2

एक संभावना यह है कि आपके पास NoScript (या समान) स्थापित है? यह वेब फोंट को ब्लॉक करने के लिए जाना जाता है जब तक कि आप उन्हें अनुमति नहीं देते।

0

Widor 5 अगस्त 2011, 17:37

बस एक वेबफॉन्ट डेमो पेज खोला और वहां कोई समस्या नहीं है। यह मेरे पेज से अलग है।

–

user808985

5 अगस्त 2011, 17:40

फ़ाइलपथ में बस एक साधारण टाइपो हो सकता है? मैंने देखा कि इसमें 'k' नहीं है उदाहरण के लिए: fonts/Blacout2.ttf

–

Widor

5 अगस्त 2011, 17:43

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

–

user808985

5 अगस्त 2011, 17:47

हम्म। अब स्ट्रॉ पर पकड़ बना रहे हैं, लेकिन क्या आप एक्सएचटीएमएल का उपयोग कर रहे हैं? किस स्थिति में

को

. होना चाहिए

–

Widor

5 अगस्त 2011, 17:53

मैंने पहले ही बड़े अक्षरों में H को बदल दिया है और हाँ मुझे पता है कि यह एक विचित्र समस्या है। सब कुछ ऐसा लगता है जैसे इसे काम करना चाहिए लेकिन यह नहीं चाहता। मैं फायरबग में परीक्षण करने वाला हूं जैसा कि क्लेनोहद ने सुझाव दिया है

–

user808985

5 अगस्त 2011, 17:55

@font_face समस्या

2 जवाब

को

. होना चाहिए

संबंधित सवाल

नए सवाल