这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:acid="http://acid/">
<head>
<title>Acid4 Test</title>
<link rel="stylesheet" type="text/css" href="acid4.css" />
</head>
<body>
<h1><acid:textGradient></acid:textGradient>Acid<span>4</span></h1>
</body>
</html>
和样式表:
@font-face {
src: url('syncopateBold.ttf');
font-family: Syncopate;
font-weight: bold;
font-style: normal;
font-variant: none;
}
@font-face {
src: url('syncopate.ttf');
font-family: Syncopate;
font-weight: normal;
font-style: normal;
font-variant: none;
}
* {
margin: 0;
padding: 0;
}
body > *:first-child { /* our title */
font-family: Syncopate;
font-size: 4em;
font-weight: bold;
margin: 0;
text-shadow: 0 0 10px black;
text-transform: lowercase;
*color: blue;
_color: red;
}
body > *:first-child > span { /* The 4 in Acid4 */
color: white;
font-weight: normal;
font-size: 200%;
vertical-align: sub;
z-index: 999;
}
acid\:textGradient:empty {
background: url('textGradient.png') repeat-x;
display: block;
height: 31px;
margin-top: 50px;
position: absolute;
width: 210px;
}
. 这是我在谷歌浏览器上得到的结果:
这是我所期望的。但是,Firefox 和 IE9 显示:
我想知道,哪个是符合标准的结果?
字体可以在这里找到:http ://www.google.com/webfonts/family? family=Syncopate&subset=latin 和 textGradient.png 只是一个渐变图像。