8

inlove-light-wf.ttfルールを使用するために、フォントをダウンロードしました@font-face。

私は自分のフォルダに持っています:home.htmlとinlove-light-wf.ttf.

私のCSSには次のものがあります：

@font-face {
    font-family: 'Inlove';
    src: url('inlove-light-wf.ttf');
    font-weight: normal;
    font-style: normal;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

#definicao{
    text-align:center;
    color:#0080C0;
    font-family:'Inlove';
    font-size:24px;
    margin-top:20px;
    border-top:solid #999 thin;
    padding: 20px 40px 3px 40px;
    height:290px;
    background-color:#EFEFEF;
}

しかし、うまくいきません。

4

3 に答える 3

1

この@font-faceルールは通常、一部の古いブラウザをサポートしていません。私は通常、含める必要のあるフォントからcssファイルを生成するfont-faceジェネレーターを使用し、すべてのブラウザーで正しく表示されます。

于 2012-09-25T20:29:21.560 に答える
1

フォントにも問題がありました。フォントが IE で動作していたときは iPhone ではなく、iPhone で動作していたときは IE ではありませんでした。これが私のコードです（なぜこのように機能するのかわかりませんが、私にとってはそうです）：

@font-face{
	font-family:"Royal Chicken";
	src: url(../gradivo/font/RoyaChicken.eot);
        src: url(../gradivo/font/RoyalChicken.ttf)  format("truetype"), /* Safari, Android, iOS */
	     url(../gradivo/font/RoyalChicken.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */
             url(../gradivo/font/RoyalChicken.woff) format("woff"), /* Pretty Modern Browsers */
             url(../gradivo/font/RoyalChicken.svg#RoyalChicken) format("svg");
}
@font-face{
	font-family:"Royal Chicken";
	src: url(../gradivo/font/RoyaChicken.eot);
}
@font-face{
	font-family:"Royal Chicken";
        src: url(../gradivo/font/RoyalChicken.ttf)  format("truetype");
}

それはあなたを助けるかもしれません。:)

于 2015-06-23T21:58:24.270 に答える