doc_browser_fontinspector.html (1715B)
1 <!DOCTYPE html> 2 3 <style> 4 @font-face { 5 font-family: bar; 6 src: url(bad/font/name.ttf), url(ostrich-regular.ttf) format("truetype"); 7 } 8 @font-face { 9 font-family: barnormal; 10 font-weight: normal; 11 src: url(ostrich-regular.ttf); 12 } 13 @font-face { 14 font-family: bar; 15 font-weight: bold; 16 src: url(ostrich-black.ttf); 17 } 18 @font-face { 19 font-family: bar; 20 font-weight: 800; 21 src: url(ostrich-black.ttf); 22 } 23 @font-face { 24 font-family: DevToolsMono; 25 src: url(devtools-mono.otf); 26 } 27 body{ 28 /* Arial doesn't exist on Linux. Liberation Sans is the default sans-serif there. */ 29 font-family:Arial, "Liberation Sans"; 30 font-size: 36px; 31 } 32 div { 33 font-size: 1em; 34 font-family:bar, "Missing Family", sans-serif; 35 } 36 .normal-text { 37 font-family: barnormal; 38 font-weight: normal; 39 } 40 .bold-text { 41 font-family: bar; 42 font-weight: bold; 43 font-size: inherit; 44 } 45 .black-text { 46 font-family: bar; 47 font-weight: 800; 48 } 49 .viewport-size { 50 font-size: 10vw; 51 } 52 .input-field { 53 font-family: bar; 54 font-size: 36px; 55 color: blue; 56 } 57 footer { 58 font-family: DevToolsMono, Arial, "Liberation Sans"; 59 } 60 </style> 61 62 <body> 63 BODY 64 <div>DIV 65 <span class="nested-span">NESTED SPAN</span> 66 </div> 67 <iframe id="example-org-iframe" src="https://example.org/browser/devtools/client/inspector/fonts/test/test_iframe.html"></iframe> 68 <div class="normal-text">NORMAL DIV</div> 69 <div class="bold-text">BOLD DIV</div> 70 <div class="black-text">800 DIV</div> 71 <div class="empty"></div> 72 <div class="viewport-size">VIEWPORT SIZE</div> 73 <input class="input-field" value="Input text value"/> 74 <footer>DevTools</footer> 75 </body>