Doctype处理CSS字体样式？
我猜我需要一个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>回答 3
Stack Overflow用户
发布于 2013-12-11 05:38:33
总是validate your HTML优先。当尝试使用无效标记做任何事情时，您只是在浪费您和其他人的时间。然后，您可以使用validate your CSS。
我发现的错误：
<!DOCTYPE HTML>应该是，因为您正在使用XML serialization，这是区分大小写的。紧跟在<!DOCTYPE之后的是文档根元素的名称。另请参阅必须关闭SO.color: de0000;上的元素必须关闭color: #de0000;.- The Uppercase or lowercase doctype?
body。在</html>. - Remove的
</font>标签之前放置</body>-没有开始标签。也是fontelement is obsolete. - Replace的
centerelement，div有style="text-align: center"。这是obsolete. - Fix
<embed allowScriptAccess="never" src="http://swing.awardspace.com/newcoun… width=320 height=110 wmode=transparent menu=false></embed>。HTML5的XML序列化中的所有属性的值都必须用引号括起来。src属性的内容明显被截断，缺少最后一个引号。
Stack Overflow用户
发布于 2013-12-11 04:13:00
在你的CSS代码中有一些错误，它可能是你没有从#开始的颜色。我也遇到过类似的问题，因为我写的是font-size: 12;而不是font-size: 12px;。
顺便说一下，我认为这是
url('lolfont.ttf') format('opentype');应该是相当的
url('lolfont.ttf') format('truetype');Stack Overflow用户
发布于 2012-05-26 06:13:21
首先检查您的字体是否有正确的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)类型的字体.Note: 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>时，它仍然有效...
https://stackoverflow.com/questions/10761453
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号