Question

我猜我需要一个doctype，因为以下字体样式只出现在Safari和Chrome中我想要的样子。因此，每次我添加HTML5文档类型时，请使用我的自定义字体写入消息。我是一名业余编码员，所以请完成代码，我自学了。

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

Answer 1

始终validate your HTML。当尝试使用无效标记做任何事情时，你只会浪费你和其他人的时间。然后，您可以validate your CSS。

我发现的错误：

<!DOCTYPE HTML>应该是<!DOCTYPE html>，因为您使用的是XML serialization，区分大小写。紧跟在<!DOCTYPE之后的东西是文档根元素的名称。另请参阅SO上的Uppercase or lowercase doctype?。
color: de0000;应为color: #de0000;。
必须关闭body元素。在</body>之前放置</html>。
删除</font>标记 - 不存在开头标记。还有font element is obsolete。
将center element替换为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序列化中的所有属性都必须包含其值的引号。 src属性的内容明显被截断，最终报价缺失。

Answer 2

您的CSS代码有问题，它可能是您没有以#开头的颜色。我遇到了类似的问题，因为我写了font-size: 12;而不是font-size: 12px;。

顺便说一句我认为这个

url('lolfont.ttf') format('opentype');

应该是

url('lolfont.ttf') format('truetype');

Answer 3

首先检查您的字体是否有正确的网址，例如，您提供的此网址不正确，并未引用任何字体。

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

如w3School所示：

Firefox，Chrome，Safari和Opera支持.ttf（True Type Fonts）和.otf（OpenType字体）类型的字体.Internet Explorer 9+支持新的@ font-face规则，但它只支持类型的字体.eot（Embedded OpenType）。注意：Internet Explorer 8及更早版本不支持新的@ font-face规则。

所以safari或chrome应该没有任何问题...

根据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 example）然后将它与你的代码集成......

顺便说一句，如果你检查示例中的DOCTYPE如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 但是，当您将其更改为<!DOCTYPE HTML>时，它仍可正常运行...

Doctype搞乱CSS字体样式？

3 个答案: