1

次のフォント スタイルは、Safari と Chrome で希望どおりにしか表示されないため、doctype が必要だと思います。そのため、HTML5 doctype を追加するたびに、カスタム フォントでの書き込みが消えます。私はアマチュア コーダーなので、独学で学んだコードを公開してください。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <style type="text/css">
    #yolk {
        background-image: url(Yolk.png);
        background-repeat: no-repeat;
        background-position: center top;
        padding-top:250px;
    }
    body {
        background-color:#000000;
    }
    #lol {
        background-image: url(lol.png);
        background-repeat: no-repeat;
        background-position: center top;
        padding-top: 100px;
        padding-bottom: 100px;
    }

    @font-face {
        font-family: my_font;
        src: url('http://myurl.com/lolfont.eot');
        src: url('lolfont.eot'), url('lolfont.ttf') format('opentype');
    }
    p {
        font-family: my_font; 
        color: de0000;
        text-align: left;
        font-size: 50px;
        line-height: 10%;
        text-indent: 350px;

    }
    </style>
    <title>yolk</title>
</head>
<body>
    <div id="yolk"></div>
    <center>
    <embed allowScriptAccess="never" src="http://swing.awardspace.com/newcoun… width=320  height=110 wmode=transparent menu=false></embed>
    </center>
    <p>test</p>
    <a href="http://www.google.com" title="lol"><div id="lol"></div></a>
    </font>
</html>
4

3 に答える 3

1

常に最初に HTML を検証してください。無効なマークアップで何かをしようとすると、自分や他の人の時間を無駄にするだけです。次に、CSS を検証できます。

私が発見した間違い：

  • <!DOCTYPE HTML>大文字と小文字を区別するXML serialization<!DOCTYPE html>を使用している必要があります。直後はドキュメントのルート要素の名前です。大文字または小文字の doctype?も参照してください。SOで。<!DOCTYPE
  • color: de0000;する必要がありますcolor: #de0000;。
  • 要素はbody閉じている必要があります。</body>直前の場所</html>。
  • タグを削除し</font>ます。開始タグはありません。また、font要素は廃止されました。
  • center要素を にdiv置き換えますstyle="text-align: center"。時代遅れです。
  • 修正し<embed allowScriptAccess="never" src="http://swing.awardspace.com/newcoun… width=320 height=110 wmode=transparent menu=false></embed>ます。HTML5 の XML シリアル化のすべての属性では、値を引用符で囲む必要があります。attributeの内容srcは明らかに切り詰められており、最後の引用符が欠落しています。
于 2013-12-10T21:38:33.217 に答える
-1

最初に、フォントの正しい URL があるかどうかを確認します。たとえば、含めたこの URL は正しくありません。どのフォントも参照していません。

src: url('http://myurl.com/lolfont.eot'); //???

w3Schoolに示されているように：

Firefox、Chrome、Safari、および Opera は、タイプ .ttf (True Type Fonts) および .otf (OpenType Fonts) のフォントをサポートします。Internet Explorer 9 以降は、新しい @font-face ルールをサポートしますが、タイプ .eot ( Embedded OpenType). 注: Internet Explorer 8 以前のバージョンは、新しい @font-face ルールをサポートしていません。

したがって、サファリやクロムに問題はないはずです...

w3Schoolによると、@font-face の正しい形式は次のとおりです。

<style type="text/css"> 
@font-face
{
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
  url('Sansation_Light.eot'); /* IE9+ */
}

div
{
   font-family:myFirstFont;
}
</style>

問題がどこにあるかを確認するには、単純なコード ( w3School の例のようなもの) から始めることをお勧めします。次に、それをコードに統合します...

ちなみに、例でDOCTYPEを確認すると、次のようになります。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ただし、に変更すると<!DOCTYPE HTML>、まだ機能します...

于 2012-05-25T22:13:21.030 に答える