選擇選項標記中的自定義字體

我已將各種自定義字體集成在FF中正常工作的標記中，但不適用於Web瀏覽器（如Chrome & safari）。選擇選項標記中的自定義字體

<select> 
<option value="" style="font-family: 'Averia Libre'!important;">I'm a custom font.</option> 
<option value="" style="font-family: 'cancun', cursive;">Hey me too!</option> 
<option value="" style="font-family: 'Averia Libre', cursive!important;">Averia Libre</option> 
</select>

jsfiddle demo here.

來源

2013-04-30 matthewb

瀏覽器供應商密謀使表單控制難以風格化。如果您想要完全控制，請將其替換爲其他類似的外觀（如ol或ul）。 – reisio 2013-04-30 08:25:55

嘿謝謝@reisio，我不能使用UL LI結構，我必須放置這些東西。 – matthewb 2013-04-30 08:30:41

當然可以，matthewb。 – reisio 2013-04-30 08:54:16

-3

使用自定義的字體（即尚未在客戶端計算機上）的唯一方法是使用@font-face到specyfy它，這意味着命名您的自定義字體（在這裏，「Myfont」），並指向至少一個定義文件（這裏，TrueType字體）：

@font-face { 
    font-family: "Myfont"; 
    src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) 
    format("truetype"); 
} 
h1 { font-family: "Myfont", sans-serif }

從webkit website：「的WebKit現在支持CSS的@ font-face規則」

W3C的specs
的CSS3.info page（與specifit的Safari/Webkit的筆記）
的alistapart article

來源

2013-04-30 09:21:22 yPhil

'@ font-face'不是問題，'

你說得對，昆汀。再次，這個問題可能會誤導新客戶，他們認爲字體已經在客戶端（或者對於人體工程學和可訪問性來說，造型網頁表單並不危險）。 – yPhil 2013-04-30 09:28:07

您可以爲使用@ font-face定義的特定字體的option創建CSS類。例如，如果u已經按照你的CSS定義@字體面

@font-face 
{ 
font-family: "MyFont1"; 
src: url('Averia_Libre.ttf'), 
    url('Averia_Libre.eot'); /* IE9 */ 
} 

@font-face { 
    font-family: "MyFont2"; 
    src: url('cancun.ttf'); 
} 

option.style1{ 
font-family: MyFont1; 
} 
option.style2{ 
font-family: MyFont2; 
}

你的HTML代碼應該是

<select> 
<option value="" class="style1">I'm a custom font.</option> 
<option value="" class="style2">Hey me too!</option> 
</select>

注意：我還沒有測試的代碼，或許它應該工作，因爲我有很久以前，在我記憶中的一項任務中這樣做了。

來源

2013-04-30 12:16:47 Sridhar

選擇選項標記中的自定義字體

回答

相關問題