Here is my code:
<!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>
and style sheet:
@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 {
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 {
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;
}
. Here is the result I get in Google Chrome:
This is what I expect. However, Firefox and IE9 display this:
I would like to know which one meets the standard?
Fonts can be found here: http://www.google.com/webfonts/family?family=Syncopate&subset=latin , and textGradient.png is just a gradient image.
source
share