Beispiel:CSS2 font-weight.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
	<title>font-weight</title>
	<style>
.fetter {font-weight: bolder; color:red;}
.w100 {font-weight: 100;}
.w200 {font-weight: 200;}
.w300 {font-weight: 300;}
.w400 {font-weight: 400;}
.w500 {font-weight: 500;}
.w600 {font-weight: 600;}
.w700 {font-weight: 700;}
.w800 {font-weight: 800;}
.w900 {font-weight: 900;}
dl {font: 2em/100% sans-serif;}
dd {margin: -1em auto auto 2em;}			
</style>
</head>
<body>
<h1>Schriftgewicht - font-weight</h1>
<h2>Angabe von absoluten Werten</h2>
<dl>
	<dt class="w100">100</dt><dd class="w100">Beispieltext</dd>
	<dt class="w200">200</dt><dd class="w200">Beispieltext</dd>
	<dt class="w300">300</dt><dd class="w300">Beispieltext</dd>
	<dt class="w400">400</dt><dd class="w400">Beispieltext</dd>
	<dt class="w500">500</dt><dd class="w500">Beispieltext</dd>
	<dt class="w600">600</dt><dd class="w600">Beispieltext</dd>
	<dt class="w700">700</dt><dd class="w700">Beispieltext</dd>
	<dt class="w800">800</dt><dd class="w800">Beispieltext</dd>
	<dt class="w900">900</dt><dd class="w900">Beispieltext</dd>
</dl>
<h2>Angabe von relativen Werten</h2>
<dl>
	<dt class="w200">200</dt><dd class="w200">Beispieltext für <span class="fetter">fettere</span> Schrift</dd>
	<dt class="w500">500</dt><dd class="w500">Beispieltext für <span class="fetter">fettere</span> Schrift</dd>
	<dt class="w900">900</dt><dd class="w900">Beispieltext für <span class="fetter">fettere</span> Schrift</dd>
</dl>

</body>
</html>