Beispiel:CSS3 font-stretch.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-stretch</title>
      <style>
		table { margin: 1em; border-collapse: collapse; }
		th, td { border: 1px solid; }
                td { font: 1.6em sans-serif; padding: .3em 1em; }
		.uc { font-stretch: ultra-condensed; }
		.ec { font-stretch: extra-condensed; }
		.c  { font-stretch: condensed; }
		.sc { font-stretch: semi-condensed; }
		.se { font-stretch: semi-expanded; }
		.e  { font-stretch: expanded; }
		.ee { font-stretch: extra-expanded; }
		.ue { font-stretch: ultra-expanded; }
      </style>
  </head>
  <body>
    <h1>Demonstration von font-stretch</h1>
	<main>
		<table>
			<thead>
				<tr><th>Schlüsselwort</th><th>Ergebnis</th></tr>
			</thead>
			<tbody>
				<tr><td><code>ultra-condensed</code></td><td class="uc">mmmmmmmmmm</td></tr>
				<tr><td><code>extra-condensed</code></td><td class="ec">mmmmmmmmmm</td></tr>
				<tr><td><code>condensed</code></td><td class="c">mmmmmmmmmm</td></tr>
				<tr><td><code>semi-condensed</code></td><td class="sc">mmmmmmmmmm</td></tr>
				<tr><td><code>normal</code></td><td>mmmmmmmmmm</td></tr>
				<tr><td><code>semi-expanded</code></td><td class="se">mmmmmmmmmm</td></tr>
				<tr><td><code>expanded</code></td><td class="e">mmmmmmmmmm</td></tr>
				<tr><td><code>extra-expanded</code></td><td class="ee">mmmmmmmmmm</td></tr>
				<tr><td><code>ultra-expanded</code></td><td class="ue">mmmmmmmmmm</td></tr>
			</tbody>
		</table>
	</main>
  </body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_font-stretch.html&oldid=54345“