Doctype 与 CSS 字体样式混淆？答案

【问题标题】：Doctype messing with CSS font styling?Doctype 与 CSS 字体样式混淆？
【发布时间】：2012-06-01 10:50:18
【问题描述】：

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

【问题讨论】：

"我猜我需要一个 doctype，因为下面的字体样式只会在 Safari 和 Chrome 中出现我想要的样式。所以每次我添加 HTML5 doctype 时，都要使用我的自定义字体dissapears" - 因此，当您添加 doctype 时，字体样式会消失。这就是为什么你需要一个文档类型？等等，什么？

标签： html css browser cross-browser compatibility

【解决方案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 规则，但它只支持 type 字体.eot（嵌入式 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> 时，它仍然可以工作......

【讨论】：

谢谢，但我尝试了你的建议，但它仍然有效。
-1 用于链接到W3Schools 和W3C。这是严重的误导，因为 W3Schools 与 W3C 无关。由于信息不准确，W3Schools 也存在争议。见W3Fools.com。

【解决方案2】：

总是先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 替换为具有style="text-align: center" 的div。它已经过时了。
修复<embed allowScriptAccess="never" src="http://swing.awardspace.com/newcoun… width=320 height=110 wmode=transparent menu=false></embed>。 HTML5 的 XML 序列化中的所有属性都必须在其值周围加上引号。 src 属性的内容明显被截断，缺少最后的引号。

【讨论】：

【解决方案3】：

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

顺便说一句，我认为

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

应该比较

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

【讨论】：