1

我猜我需要一个 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>
4

3 回答 3

1

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

我发现的错误：

  • <!DOCTYPE HTML>应该<!DOCTYPE html>像您使用XML 序列化一样，这是区分大小写的。紧随其后<!DOCTYPE的是文档根元素的名称。另请参阅大写或小写文档类型？就这样。
  • color: de0000;应该是color: #de0000;。
  • 该body元素必须关闭。放在</body>前面</html>。
  • 删除</font>标签 - 不存在开始标签。该font元素也已过时。
  • 用有替换center元素。它已经过时了。divstyle="text-align: center"
  • 修复<embed allowScriptAccess="never" src="http://swing.awardspace.com/newcoun… width=320 height=110 wmode=transparent menu=false></embed>. HTML5 的 XML 序列化中的所有属性都必须在其值周围加上引号。属性的内容src明显被截断，缺少最后的引号。
于 2013-12-10T21:38:33.217 回答
0

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

顺便说一句，我认为这

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

应该是

url('lolfont.ttf') format('truetype');
于 2013-12-10T20:12:59.587 回答
-1

首先检查您的字体是否有正确的 url，例如，您包含的这个 URL 不正确，它没有引用任何字体。

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

如 w3School 所示：

Firefox、Chrome、Safari 和 Opera 支持 .ttf（True Type 字体）和 .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 示例）然后将其与您的代码集成......

顺便说一句，如果您检查示例中的 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 回答