試圖給選擇選項菜單的字體家庭

我試圖給我的選擇菜單的字體家庭，但它不工作。試圖給選擇選項菜單的字體家庭

我試着使用下面的代碼，它似乎可以在谷歌瀏覽器上工作，但在Internet Explorer中我有不同的字體系列。

你知道我怎樣才能設置一個字體家庭我的選項，在Chrome瀏覽器上工作，但也在Internet Explorer？

這是我的html：

<div class="select_teams"> 
     <select name="teams"> 
      <option class="option">Select your team:</option> 
      <option class="option" value="1">ACM</option> 
      <option class="option" value="2">PSG</option> 
      <option class="option" value="2">RM</option> 
     </select> 
</div>

這是我的CSS：

.select_teams select{min-width:250px; padding:10px; border:3px solid #CCC; font-size:18px;} 
.select_teams .option{transition:none; font-family:'bariol_regularregular';}

在Chrome和Mozilla即時得到這樣的：

enter image description here

在Internet Explorer上即時得到這個：

enter image description here

來源

2014-06-28 UserX

這很可能取決於您如何嵌入bariol_regularregular字體。

你沒有備用字體，所以瀏覽器會：

1）嘗試使用bariol_regularregular 2）使用瀏覽器的默認字體

如果你已經正確嵌入它的Chrome，但不是IE，這是一種可能的解決方案： Safari and IE can't read TTF and EOT fonts

使用Google字體中類似的字體可能是一種更快的修復方法 - 它們會爲您做所有這些。

來源

2014-06-28 22:53:18

謝謝你的回答理查德B所以我會嘗試使用verdana而不是bariol。但即使我使用這個CSS：.posts select_teams .option {transition：none; font-family：Verdana，Geneva，sans-serif;}在Internet Explorer中Im總是有一個不同的字體。你知道爲什麼會發生這種情況嗎？ – UserX

我已經嘗試在google字體中找到類似bariol的字體系列，但我從未找到！ – UserX

將它應用到您的選擇而不是選項似乎工作。也可能與您的原始字體一起工作（但請記住，因爲它不是Web安全的，所以需要嵌入）。 –

在select元素上設置字體，而不是在option元素上設置字體。例如：

.select_teams { font-family: 'bariol_regularregular'; }

的原因是，IE使用一個統一的風格option元素的基礎上，他們的父母select元素的樣式，而不是單獨讓我們樣式選項。參看到Styling options in bold in Internet Explorer。

來源

2014-06-29 07:42:27

謝謝Jukka K.Korpela。現在我用你的答案瞭解IE上的問題。但你的解決方案仍然不能在Internet Explorer上工作！ – UserX

我在IE 11中測試瞭解決方案，同樣使用了仿真模式直到IE 5，自然使用了系統中實際存在的字體。如果它不適合你，檢查它是否是bariol_regularregular字體的問題：它是否適用於普通內容（比如，對於'p'元素）？ –

試圖給選擇選項菜單的字體家庭

回答

相關問題