Babuíno
@font-face {
font-family: 'PT Sans';
src: url('pt-sans.ttf');
font-weight: normal;
font-style: normal;
}
.titulo {
font-family: 'PT Sans';
}
@font-face {
font-family: 'Icones';
src: url('icones.eot');
src: url('icones.eot?#iefix')
format('embedded-opentype'),
url('icones.woff') format('woff'),
url('icones.ttf') format('truetype'),
url('icones.svg#pt_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
.icone-legal {
font-family: 'Icones';
}
<img src="logo.svg">
<!doctype html>
<html>
<body>
<h1>Meu teste de SVG</h1>
<svg>
<circle cx="50" cy="50" r="40" fill="#F90">
</svg>
</body>
</html>
.logo {
background: url(logo.svg) no-repeat;
}
<img src="logo.svg"
onerror="this.src='logo.png'">
.svg .logo {
background: url(logo.svg) no-repeat;
}
.no-svg .logo {
background: url(logo.png) no-repeat;
}
<img src="foto.jpg">
<img src="grafico.png">
<img src="fallback.jpg"
srcset="foto.jpg 1x, retina.jpg 2x">
<img src="fallback.jpg"
src2="(min-width: 400px) medium.jpg"
src3="(min-width: 1000px) large.jpg">
.foto {
background: url(foto-normal.jpg) no-repeat;
}
@media (resolution: 2dppx) {
.foto {
background-image: url(foto-retina.jpg);
background-size: 100%;
}
}
.foto {
background: url(foto-normal.jpg) no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) {
.foto {
background-image: url(foto-retina.jpg);
background-size: 100%;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/exemplo.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
<image:title>Minha foto bacana</image:title>
</image:image>
</url>
</urlset>
<div class="foto" role="img"
aria-label="Semanticamente, sou uma foto!">
</div>