CSS - 將文本與圖像混合的更好的解決方案是什麼？

Question

我們必須設計一些文字如下：

Text in English XXX Text in English XXX Text in English. 

雖然XXX應與英文文本的高度相同的圖像所取代。

我想知道是否有更好的解決方案。

謝謝

////////更新////////////////

XXX in fact are text translated in other language. 

例如， 在一個句子如下：

蘋果，橙子和香蕉。

我們有上述行更改爲

蘋果（XXX），橙色（XXX），香蕉（XXX）。

這裏XXX是外語不同水果的翻譯。 我們必須在unicode中使用圖像而不是文本的原因是我們不希望強制用戶選擇不同的字符集來查看頁面。

Answer 1

很難告訴你想要什麼，因爲你幾乎沒有給我們任何具體的細節，但是這裏有一些方法來實現你想要的。

最簡單的方法是使用img標籤添加圖像。圖像默認爲內聯元素，並且由於您聲明它們與文本高度相同，因此我不認爲只是將它們添加到內容中就沒有任何問題，例如此處的圖像。只要你給它正確的alt文本，它應該沒問題。

如果真的想要的圖像文本替換，就可以用通常的方法，是這樣的：

#replace { 
    text-indent: -9999px; 
    background: url('http://i.stack.imgur.com/da29E.png') no-repeat center bottom; 
    width: 16px; 
    height: 14px; 
    display: inline-block; 
} 

凡#replace是一個段落裏面span，如：

<p>The <span id="replace">Flag of the United States of America</span> is a brilliant flag. </p> 

，你可以看，它有點麻煩，並且根本不提供任何優於img方法的優勢。看看這裏的文本替換版本：http://jsfiddle.net/VEn5p/

Answer 2

您可以嘗試在ems中同時指定行高和圖像高度。圖像寬度必須是高度的倍數才能保持正確的比例。