Eget typsnitt med CSS (cross-browser)

Många väljer av estetiska skäl att använda bilder istället för rubriker på sin webbplats. Bilder som rubriker har i huvudsak två nackdelar:

• Det är tidskrävande och oflexibelt
• Sökmotorer går miste om viktig information

Med CSS3 begränsas du inte till de typsnitt som besökaren installerat på sin dator. Genom att lägga typsnittet på servern och referera till det via CSS öppnas helt nya möjligheter.

Det huvudsakliga problemet är att IE inte stödjer TrueType-typsnitt. För att fixa detta krävs att typsnittet finns som både TrueType (TTF) och OpenType (EOT). Ett TTF-typsnitt kan enkelt konverteras online till EOT med hjälp av TTF to EOT Font Converter. Ladda sedan upp bägge typsnitten till servern…

Exemplet nedan ser ut som en skärmdump från Commodore 64 BASIC, men skenet bedrar. Jag har endast använt mig av CSS3 och typsnittet ”Commodore 64″ (prova gärna att markera gärna texten).

Så ser koden ut:

<style type=”text/css”>
@font-face {
font-family: ”Commodore 64″;
src: url(‘/c64.eot’); /* IE */
src: local(‘Commodore 64′), url(‘/c64.ttf’) format(‘truetype’); /* non-IE */
}

.c64-screen  {
width: 320px;
height: 200px;
font-family: ”Commodore 64″;
font-size: 10px;
color: #7777ff;
background: #110099;
border: #7777ff 32px solid;
padding-top: 1px;
line-height: normal;
}

.c64-header  {
text-align: center;
}
</style>

<div class=”c64-screen”>
<div class=”c64-header”>
**** COMMODORE 64 BASIC V2 ****<br /><br />
64K RAM SYSTEM &nbsp;38911 BASIC BYTES FREE<br /><br />
</div>
READY.
</div>