7

タグにさまざまなカスタム フォントを統合しましたが、FF では正常に動作しますが、(chrome & safari) などの Web キット ブラウザーでは動作しません。

<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 のデモはこちら。

4

2 に答える 2

0

option@font-face を使用して定義された特定のフォントを使用する CSS クラスを作成できます。たとえば、CSS で次の @font-face が定義されている場合

@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>

コードをテストしていないことに注意してください。おそらく動作するはずです。覚えているタスクの1つでずっと前にこのようにしたからです。

于 2013-04-30T12:16:47.450 に答える
-3

カスタム フォント (つまり、クライアントのマシンにまだない) を使用する唯一の方法は、 を使用してそれを指定@font-faceすることです。つまり、カスタム フォント (ここでは "Myfont") に名前を付け、少なくとも 1 つの定義ファイル (ここでは、 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 Web サイトから:「WebKit now supports CSS @font-face rules」

  • W3c仕様
  • CSS3.infoページ(特定の Safari / Webkit に関するメモ付き)
  • アリスタパートの 記事
于 2013-04-30T09:21:22.480 に答える