chromium/src/third_party/blink/web_tests/virtual/text-antialias/font-weight-variant.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <style>
             div { font-family: Segoe UI; }
             .light { font-family: Segoe UI Light; }
             .semibold { font-family: Segoe UI Semibold; }
         </style>
     </head>
     <body>
         <section>
             <h2>font-weight: 200 vs light</h2>
             <div style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light">Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
             <p>
                 The three lines above should have the same weight.
             </p>
         </section>

         <section>
             <h2>font-weight: 600 vs semibold</h2>
             <div style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold">Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
             <p>
                 The three lines above should have the same weight.
             </p>
         </section>

         <section>
             <h2>Specific weight, Segoe UI</h2>
             <div style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
             <div style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
         </section>

         <section>
             <h2>Specific weight, Segoe UI Light</h2>
             <div class="light" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="light" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
         </section>

         <section>
             <h2>Specific weight, Segoe UI Semibold</h2>
             <div class="semibold" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
             <div class="semibold" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
         </section>
     </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	div { font-family: Segoe UI; }
	.light { font-family: Segoe UI Light; }
	.semibold { font-family: Segoe UI Semibold; }
	</style>
	</head>
	<body>
	<section>
	<h2>font-weight: 200 vs light</h2>
	<div style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light">Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 200">Back in June we delivered oxygen equipment of the same size.</div>
	<p>
	The three lines above should have the same weight.
	</p>
	</section>

	<section>
	<h2>font-weight: 600 vs semibold</h2>
	<div style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold">Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 600">Back in June we delivered oxygen equipment of the same size.</div>
	<p>
	The three lines above should have the same weight.
	</p>
	</section>

	<section>
	<h2>Specific weight, Segoe UI</h2>
	<div style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
	<div style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
	</section>

	<section>
	<h2>Specific weight, Segoe UI Light</h2>
	<div class="light" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="light" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
	</section>

	<section>
	<h2>Specific weight, Segoe UI Semibold</h2>
	<div class="semibold" style="font-weight: 100">font-weight: 100 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 200">font-weight: 200 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 300">font-weight: 300 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 400">font-weight: 400 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 500">font-weight: 500 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 600">font-weight: 600 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 700">font-weight: 700 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 800">font-weight: 800 - Back in June we delivered oxygen equipment of the same size.</div>
	<div class="semibold" style="font-weight: 900">font-weight: 900 - Back in June we delivered oxygen equipment of the same size.</div>
	</section>
	</body>
	</html>