ब्राउज़र नियंत्रण वाले छवियों में टेक्स्ट कैसे खोजें + एफ

कई अनुभागों वाले HTML पृष्ठ हैं और प्रत्येक अनुभाग में एक छवि शीर्षक (अच्छा फ़ॉन्ट का उपयोग करने के लिए) के रूप में प्रदर्शित एक अनुभाग शीर्षक है। समस्या यह है कि अगर मैं प्रत्येक छवि/शीर्षक पर 'alt' और 'शीर्षक' टेक्स्ट निर्दिष्ट करता हूं, तो Ctrl + F ब्राउज़र कार्यक्षमता को टेक्स्ट नहीं मिलता है। दो संभावित समाधानों पर विचार किया लेकिन उनके बारे में बहुत खुश नहींब्राउज़र नियंत्रण वाले छवियों में टेक्स्ट कैसे खोजें + एफ

1) एम्बेड फ़ॉन्ट्स का उपयोग करें। समस्या: क्लाइंट द्वारा उपयोग किए जाने वाले फ़ॉन्ट को कॉपीराइट के बारे में सुनिश्चित नहीं किया जा सकता है।

2) छवि के पास डीआईवी में छवि में टेक्स्ट है लेकिन उपयोगकर्ता दृश्य से छिपा हुआ है। समस्या: क्या खोज इंजन इस कीवर्ड को भरने पर विचार कर सकते हैं? यदि प्रदर्शन प्रदर्शित होता है तो ब्राउज़र को टेक्स्ट मिल जाएगा: कोई भी

क्या किसी के पास बेहतर समाधान है? धन्यवाद रीगा

स्रोत

2010-06-11 Riga

प्रश्न 2 का उत्तर देने के लिए। नहीं, CTRL-F 'डिस्प्ले: किसी भी' के साथ छिपा हुआ divs के अंदर पाठ के लिए काम नहीं करेगा। –

ब्राउज़र छवियों में पाठ खोज नहीं सकते हैं। 'डिस्प्ले: कोई भी आपकी समस्या को हल नहीं करेगा। मैं केवल छवियों का उपयोग करने का सुझाव देता हूं जहां उनकी आवश्यकता है। टाइटल निश्चित रूप से सादा पाठ के साथ लिखा जाना चाहिए। – hudolejev

क्यू 2 का उत्तर देने के लिए, आप डिस्प्ले का उपयोग किए बिना उपयोगकर्ता दृश्य से टेक्स्ट छुपा सकते हैं: कोई नहीं; । जस्टे को मार्जिन-बाएं जोड़ना होगा: -99 99; –

आम तौर पर छवि प्रतिस्थापन का सबसे अच्छा तरीका स्टाइलशीट के भीतर विशेष रूप से ऐसा करना है।

एचटीएमएल अभी भी दिखना चाहिए:

<h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

आपका सीएसएस तो कर सकते हैं:

h2#fantastic-section-of-awesomeness { 
    background: ...; /* The replacement image */ 
} 
h2 span { 
    text-indent: -100000px; 
}

ध्यान दें कि पाठ वास्तव में छिपा हुआ नहीं है। कुछ स्क्रीन पाठक display: none; गलत तरीके से व्याख्या करते हैं (भले ही media="screen" स्टाइलशीट में दिए गए हों)। इसके बजाए, हम इसे स्क्रीन के बाईं तरफ दूर ले जाते हैं जहां इसे वास्तविक रूप से देखा नहीं जा सकता है।

मैंने विशेष रूप से Ctrl + F के लिए इसका परीक्षण नहीं किया है, लेकिन तथ्य यह है कि पाठ अभी भी तकनीकी रूप से दिखाई दे रहा है, ब्राउज़र को इसे ढूंढने की अनुमति देनी चाहिए।

यह नहीं छवि के रूप में छवि को हाइलाइट करने में सक्षम हो सकता है, हालांकि, जो अभी भी भ्रम पैदा कर सकता है। @font-face का उपयोग किए बिना इसके आसपास कोई वास्तविक तरीका नहीं है।

स्रोत

2010-06-11 13:23:49 VoteyDisciple

हम्म ... मैं उत्पन्न छवियों का उपयोग करने के लिए एक विकल्प के रूप में Cufon सिफारिश करने के लिए जा रहा था, लेकिन यह सही नहीं है: फ़ायरफ़ॉक्स में काम करता है सर्च कर रहे हैं लेकिन नहीं भी अच्छी तरह से (खराब स्थिति और कोई हाइलाइटिंग)।

अभी भी शीर्षकों के रूप में छवियों से बेहतर तरीका है।

स्रोत

2010-06-11 13:16:55

इसे पूरा करने के मैं इस generator

इन साइटों का उपयोग कर भी उदाहरण और उपयोग निर्देश इस पुस्तकालय के लिए typeface.js Javascript library

आप उत्पन्न कर सकते हैं कस्टम फोंट का इस्तेमाल किया है।

स्रोत

2010-06-11 13:21:02 gruntled

Ctrl + F का प्रयास किया और पाठ – Riga

नहीं मिला, मैं उनके कुछ उदाहरण देख रहा हूं और वे खोजने योग्य नहीं हैं। लेकिन मैं इसे ऐसी वेबसाइट पर उपयोग कर रहा हूं जहां खोज ठीक काम करती है। मैं देखूंगा कि इसके लिए एक विशिष्ट झंडा है या नहीं। – gruntled

टाइपफेस लाइब्रेरी का कौन सा संस्करण आप उपयोग कर रहे हैं? – gruntled

क्यों Google Font Directory

गूगल फ़ॉन्ट निर्देशिका आप सभी फ़ॉन्ट गूगल फ़ॉन्ट एपीआई के माध्यम से उपलब्ध ब्राउज़ करने देता है की कोशिश नहीं। निर्देशिका में सभी फ़ॉन्ट्स पर खुले स्रोत लाइसेंस के तहत आपकी वेबसाइट पर उपयोग के लिए उपलब्ध हैं और Google सर्वर द्वारा परोसा जाता है।

स्रोत

2010-06-11 13:23:04

मेरे क्लाइंट द्वारा आवश्यक फ़ॉन्ट Google द्वारा प्रदान किए गए सेट में नहीं है। मेरा ग्राहक कॉपीराइट के बारे में निश्चित नहीं है FFox 3.6 के साथ प्रयास किया और सभी फ़ॉन्ट समान दिखते हैं। – Riga

तुम भी तत्वों पर z- सूचकांक इस्तेमाल कर सकते हैं: जब वह के लिए "मेरा धारा खोज ताकि उपयोगकर्ता केवल छवि देखता है लेकिन खंड पा सकते हैं

<html> 
    <body> 
     ... 
     <div> 
      <div style="position:absolute; z-index: 1">My Section Header</div> 
      <div style="position:absolute; z-index: 2"><img src="test.png"/></div> 
     </div> 
     ... 
    </body> 
</html>

छवि पाठ के सामने है हैडर "।

स्रोत

2010-06-11 13:27:41

ब्राउज़र नियंत्रण वाले छवियों में टेक्स्ट कैसे खोजें + एफ

उत्तर

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