MENÜ

SOCIAL MEDIA

» Startseite » html » Beitrag

Text formatieren mit CSS @font-face

HTML:

<html>
<head>
<title>Text formatieren mit CSS @font-face</title>
<!-- 
Das Format TTF ist geeignet für Firefox, Chrome, Safari, Opera
Das Format EOT für IE
Das Format SVG ist für IPhones und IPads
Das Format WOFF (Web Open Font Format) wurde von W3C als zukünftigen Standard diskotiert
und wird bereits von Firefox 3.6 , Chrome 5.0 und IE 9 unterstützt
-->
<style type="text/css"> 
.box{
    float:left;
    margin:2em 0.5em;
    width:200px;
    height:120px;
    border:2px dotted black;
    background-color:#fff;
    line-height:120px;
    text-align:center; 
    -moz-border-radius:1em; 
}
@font-face {
    font-family: 'Landsdowne';
    src: url('http://www.accessburn.de/fonts/Landsdowne.eot?') format('eot'),
         url('http://www.accessburn.de/fonts/Landsdowne.woff') format('woff'),
         url('http://www.accessburn.de/fonts/Landsdowne.ttf') format('truetype'),
         url('http://www.accessburn.de/fonts/Landsdowne.svg#Landsdowne') format('svg');
}
@font-face {
    font-family: 'NauertRegular';
    src: url('http://www.accessburn.de/fonts/NauertRegular.eot?') format('eot'),
         url('http://www.accessburn.de/fonts/NauertRegular.woff') format('woff'),
         url('http://www.accessburn.de/fonts/NauertRegular.ttf') format('truetype'),
         url('http://www.accessburn.de/fonts/NauertRegular.svg#NauertRegular') format('svg');
}
@font-face {
    font-family: 'KELMSCOT';
    src: url('http://www.accessburn.de/fonts/KELMSCOT_Roman.eot?') format('eot'),
         url('http://www.accessburn.de/fonts/KELMSCOT_Roman.woff') format('woff'),
         url('http://www.accessburn.de/fonts/KELMSCOT_Roman.TTF') format('truetype'),
         url('http://www.accessburn.de/fonts/KELMSCOT_Roman.svg#KELMSCOT_Roman') format('svg');
}
@font-face {
    font-family: 'BLESD';
    src: url('http://www.accessburn.de/fonts/BLESD.eot?') format('eot'),
         url('http://www.accessburn.de/fonts/BLESD.woff') format('woff'),
         url('http://www.accessburn.de/fonts/BLESD.ttf') format('truetype'),
         url('http://www.accessburn.de/fonts/BLESD.svg#BLESD') format('svg');
}

#box1 {
    font-family: 'Landsdowne';
    font-size: 28px;
}
#box2 {
    font-family: 'NauertRegular';
    font-size: 28px;
}
#box3 {
    font-family: 'KELMSCOT';
    font-size: 28px;
}
#box4 {
    font-family: 'BLESD';
    font-size: 28px;
}
</style>
</head>
<body>
<div class="box" id="box1">Landsdowne</div>
<div class="box" id="box2">NauertRegular</div>
<div class="box" id="box3">Kelscot-Roman</div>
<div class="box" id="box4">Blessed Day</div>
<div style="clear: left;"><!-- --></div>
</body>
</html>