| <html> |
| <head> |
| <style> |
| @font-face { |
| font-family: fontface; |
| src: local('Times New Roman'), local('Tinos-Regular'); |
| } |
| |
| .local { |
| font-family: 'Times New Roman', 'Tinos'; |
| } |
| |
| .face { |
| font-family: fontface; |
| } |
| |
| .bold { |
| font-weight: 700; |
| font-size: 20px; |
| } |
| |
| .italic { |
| font-style: italic; |
| font-size: 20px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>The following two lines should look differently. The first line is synthetic bold of normal face, the second line is bold face.</p> |
| <div class="face bold"><span>The quick brown fox jumps over the lazy dog</span></div> |
| <div class="local bold"><span>The quick brown fox jumps over the lazy dog</span></div> |
| <p>The following two lines should look differently. The first line is synthetic italic of normal face, the second line is italic face.</p> |
| <div class="face italic"><span>The quick brown fox jumps over the lazy dog</span></div> |
| <div class="local italic"><span>The quick brown fox jumps over the lazy dog</span></div> |
| <script src="resources/wait_for_async_local_fonts.js"></script> |
| </body> |
| </html> |
