third_party/WebKit/LayoutTests/fast/text/font-weight-variant.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             div { font-family: Segoe UI; }
   6             .light { font-family: Segoe UI Light; }
   7             .semibold { font-family: Segoe UI Semibold; }
   8         </style>
   9     </head>
  10     <body>
  11         <section>
  12             <h2>font-weight: 200 vs light</h2>
  13             <div style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
  14             <div class="light">Back in June we delivered oxygen equipment of the same size.</div>
  15             <div class="light" style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
  16             <p>
  17                 The three lines above should have the same weight.
  18             </p>
  19         </section>
  20
  21         <section>
  22             <h2>font-weight: 600 vs semibold</h2>
  23             <div style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
  24             <div class="semibold">Back in June we delivered oxygen equipment of the same size.</div>
  25             <div class="semibold" style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
  26             <p>
  27                 The three lines above should have the same weight.
  28             </p>
  29         </section>
  30
  31         <section>
  32             <h2>Specific weight, Segoe UI</h2>
  33             <div style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
  34             <div style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
  35             <div style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
  36             <div style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
  37             <div style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
  38             <div style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
  39             <div style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
  40             <div style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
  41             <div style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
  42         </section>
  43
  44         <section>
  45             <h2>Specific weight, Segoe UI Light</h2>
  46             <div class="light" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
  47             <div class="light" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
  48             <div class="light" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
  49             <div class="light" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
  50             <div class="light" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
  51             <div class="light" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
  52             <div class="light" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
  53             <div class="light" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
  54             <div class="light" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
  55         </section>
  56
  57         <section>
  58             <h2>Specific weight, Segoe UI Semibold</h2>
  59             <div class="semibold" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
  60             <div class="semibold" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
  61             <div class="semibold" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
  62             <div class="semibold" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
  63             <div class="semibold" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
  64             <div class="semibold" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
  65             <div class="semibold" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
  66             <div class="semibold" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
  67             <div class="semibold" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
  68         </section>
  69     </body>
  70 </html>