<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : LF_font-stretch.html |
| Label : Basics |
| Author : Louisa Fortwengel |
| Size : 1.908 bytes (4 KB on disk) |
| Created : 07. February 2024 at 09:23 |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font-stretch</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 6vh;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden; height: 100vh;
}
.class-1 {
/* defines a font stretch of 50% */
font-stretch: 50%;
}
.class-2 {
/* defines a font stretch of 75% */
font-stretch: 75%;
}
.class-3 {
/* defines a font stretch of 125% */
font-stretch: 125%;
}
.class-4 {
/* defines the default font stretch */
font-stretch: 100%;
}
.class-5 {
/* defines a font stretch of 150% */
font-stretch: 150%;
}
</style>
</head>
<body>
<div>
<p class="class-4">font stretch 100%</p>
<p class="class-1">font stretch 50%</p>
<p class="class-5">font stretch 150%</p>
<p class="class-2">font stretch 75%</p>
<p class="class-3">font stretch 125%</p>
</div>
</body>
</html>
