html - Doctype 搞乱了 CSS 字体样式?

标签 html css browser cross-browser compatibility

我猜我需要一个文档类型,因为下面的字体样式只在 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>

最佳答案

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

我发现的错误:

  • <!DOCTYPE HTML>应该是 <!DOCTYPE html> 因为你正在使用 XML serialization ,区分大小写。 <!DOCTYPE 之后的东西是文档根元素的名称。另见 Uppercase or lowercase doctype?在 SO 上。
  • color: de0000;应该是 color: #de0000; .
  • body元素必须关闭。地点 </body>就在</html>之前.
  • 删除 </font> tag – 没有开始标签。还有 font element is obsolete .
  • 替换 center elementdivstyle="text-align: center" .它已经过时了。
  • 修复 <embed allowScriptAccess="never" src="http://swing.awardspace.com/newcoun… width=320 height=110 wmode=transparent menu=false></embed> . HTML5 的 XML 序列化中的所有属性都必须在其值周围加上引号。 src的内容属性明显被截断,缺少最后的引号。

关于html - Doctype 搞乱了 CSS 字体样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10761453/

相关文章:

javascript - 缓存javascript文件的基础是什么?

javascript - 我的代码容易受到 XSS 攻击吗?

html - CSS flex 盒 |修复 Flex 列高度之间的空间

jquery - 使用 css 将纸张大小设置为 A5 在 google chrome 页面打印中不起作用

css - 父 div float 干扰子 div 的宽度

html - 使用 CSS 定位所有其他嵌套列表

browser - 我应该使用 Electron 的 webview 来模拟浏览器吗?

javascript - 在 React 中关闭浏览器的确认框

javascript - 无法将表单数据推送到 JSON 文件中

当 iPhone 5 应用程序处于后台时,Javascript 计时器不运行