API tools faq
paste
here2share

HTML font viewer

here2share
Dec 12th, 2016
158
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <title>CSS Fonts</title>
  4.  
  5. <!-- https://fonts.google.com/ Providing Over 800 Free Web Fonts -->
  6.  
  7. <FONT face="verdana" size=6pt color=green><b>CSS Font Viewer</b></FONT>
  8. </header>
  9. </head>
  10.  
  11. <body>
  12. <style>
  13.     html {
  14.         font: 24px Helvetica, sans-serif;
  15.     }
  16.     p {
  17.         color: blue;
  18.         font: 16px Helvetica, sans-serif;
  19.         margin: 2px;
  20.     }
  21. </style>
  22. <p>To quickly preview...
  23. <select id="fontfamily">
  24. <option>-- Choose a font --</option><option style="font-family:algerian" id="algerian" value="algerian">algerian</option>
  25. <option style="font-family:amaze" id="amaze" value="amaze">amaze</option>
  26. <option style="font-family:arial black" id="arialblack" value="arial black">arial black</option>
  27. <option style="font-family:arial unicode ms" id="arialunicodems" value="arial unicode ms">arial unicode ms</option>
  28. <option style="font-family:arial" id="arial" value="arial">arial</option>
  29. <option style="font-family:balthazar" id="balthazar" value="balthazar">balthazar</option>
  30. <option style="font-family:bart" id="bart" value="bart">bart</option>
  31. <option style="font-family:book antiqua" id="bookantiqua" value="book antiqua">book antiqua</option>
  32. <option style="font-family:bookman old style" id="bookmanoldstyle" value="bookman old style">bookman old style</option>
  33. <option style="font-family:braggadocio" id="braggadocio" value="braggadocio">braggadocio</option>
  34. <option style="font-family:britannic bold" id="britannicbold" value="britannic bold">britannic bold</option>
  35. <option style="font-family:brush script mt" id="brushscriptmt" value="brush script mt">brush script mt</option>
  36. <option style="font-family:century gothic" id="centurygothic" value="century gothic">century gothic</option>
  37. <option style="font-family:century" id="century" value="century">century</option>
  38. <option style="font-family:chicago" id="chicago" value="chicago">chicago</option>
  39. <option style="font-family:colonna mt" id="colonnamt" value="colonna mt">colonna mt</option>
  40. <option style="font-family:comic sans ms" id="comicsansms" value="comic sans ms">comic sans ms</option>
  41. <option style="font-family:copperplate gothic bold" id="copperplategothicbold" value="copperplate gothic bold">copperplate gothic bold</option>
  42. <option style="font-family:courier" id="courier" value="courier">courier</option>
  43. <option style="font-family:cursive" id="cursive" value="cursive">cursive</option>
  44. <option style="font-family:desdemona" id="desdemona" value="desdemona">desdemona</option>
  45. <option style="font-family:elephant" id="elephant" value="elephant">elephant</option>
  46. <option style="font-family:fantasy" id="fantasy" value="fantasy">fantasy</option>
  47. <option style="font-family:footlight mt light" id="footlightmtlight" value="footlight mt light">footlight mt light</option>
  48. <option style="font-family:futurablack BT" id="futurablackBT" value="futurablack BT">futurablack BT</option>
  49. <option style="font-family:futuralight BT" id="futuralightBT" value="futuralight BT">futuralight BT</option>
  50. <option style="font-family:garamond" id="garamond" value="garamond">garamond</option>
  51. <option style="font-family:gaze" id="gaze" value="gaze">gaze</option>
  52. <option style="font-family:geneva" id="geneva" value="geneva">geneva</option>
  53. <option style="font-family:georgia" id="georgia" value="georgia">georgia</option>
  54. <option style="font-family:georgia" id="georgia" value="georgia">georgia</option>
  55. <option style="font-family:harrington" id="harrington" value="harrington">harrington</option>
  56. <option style="font-family:helterskelter" id="helterskelter" value="helterskelter">helterskelter</option>
  57. <option style="font-family:helvetica" id="helvetica" value="helvetica">helvetica</option>
  58. <option style="font-family:herman" id="herman" value="herman">herman</option>
  59. <option style="font-family:impact" id="impact" value="impact">impact</option>
  60. <option style="font-family:jester" id="jester" value="jester">jester</option>
  61. <option style="font-family:john handy LET" id="johnhandyLET" value="john handy LET">john handy LET</option>
  62. <option style="font-family:jokerman LET" id="jokermanLET" value="jokerman LET">jokerman LET</option>
  63. <option style="font-family:lithograph" id="lithograph" value="lithograph">lithograph</option>
  64. <option style="font-family:lucida console" id="lucidaconsole" value="lucida console">lucida console</option>
  65. <option style="font-family:map symbols" id="mapsymbols" value="map symbols">map symbols</option>
  66. <option style="font-family:marlett" id="marlett" value="marlett">marlett</option>
  67. <option style="font-family:matisse ITC" id="matisseITC" value="matisse ITC">matisse ITC</option>
  68. <option style="font-family:matteroffact" id="matteroffact" value="matteroffact">matteroffact</option>
  69. <option style="font-family:matura mt script capitals" id="maturamtscriptcapitals" value="matura mt script capitals">matura mt script capitals</option>
  70. <option style="font-family:mekanik LET" id="mekanikLET" value="mekanik LET">mekanik LET</option>
  71. <option style="font-family:monaco" id="monaco" value="monaco">monaco</option>
  72. <option style="font-family:monospace" id="monospace" value="monospace">monospace</option>
  73. <option style="font-family:palatino" id="palatino" value="palatino">palatino</option>
  74. <option style="font-family:papyrus" id="papyrus" value="papyrus">papyrus</option>
  75. <option style="font-family:playbill" id="playbill" value="playbill">playbill</option>
  76. <option style="font-family:poor richard" id="poorrichard" value="poor richard">poor richard</option>
  77. <option style="font-family:puppylike" id="puppylike" value="puppylike">puppylike</option>
  78. <option style="font-family:rockwell" id="rockwell" value="rockwell">rockwell</option>
  79. <option style="font-family:roland" id="roland" value="roland">roland</option>
  80. <option style="font-family:sans-serif" id="sans-serif" value="sans-serif">sans-serif</option>
  81. <option style="font-family:serif" id="serif" value="serif">serif</option>
  82. <option style="font-family:short hand" id="shorthand" value="short hand">short hand</option>
  83. <option style="font-family:showcard gothic" id="showcardgothic" value="showcard gothic">showcard gothic</option>
  84. <option style="font-family:simplex" id="simplex" value="simplex">simplex</option>
  85. <option style="font-family:simpson" id="simpson" value="simpson">simpson</option>
  86. <option style="font-family:stylus BT" id="stylusBT" value="stylus BT">stylus BT</option>
  87. <option style="font-family:surfer" id="surfer" value="surfer">surfer</option>
  88. <option style="font-family:symbol" id="symbol" value="symbol">symbol</option>
  89. <option style="font-family:tahoma" id="tahoma" value="tahoma">tahoma</option>
  90. <option style="font-family:technic" id="technic" value="technic">technic</option>
  91. <option style="font-family:tempus sans ITC" id="tempussansITC" value="tempus sans ITC">tempus sans ITC</option>
  92. <option style="font-family:times new roman" id="timesnewroman" value="times new roman">times new roman</option>
  93. <option style="font-family:times" id="times" value="times">times</option>
  94. <option style="font-family:trebuchet MS" id="trebuchetMS" value="trebuchet MS">trebuchet MS</option>
  95. <option style="font-family:verdana" id="verdana" value="verdana">verdana</option>
  96. <option style="font-family:victorian LET" id="victorianLET" value="victorian LET">victorian LET</option>
  97. <option style="font-family:vineta BT" id="vinetaBT" value="vineta BT">vineta BT</option>
  98. <option style="font-family:vivian" id="vivian" value="vivian">vivian</option>
  99. <option style="font-family:webdings" id="webdings" value="webdings">webdings</option>
  100. <option style="font-family:western" id="western" value="western">western</option>
  101. <option style="font-family:westminster" id="westminster" value="westminster">westminster</option>
  102. <option style="font-family:westwood LET" id="westwoodLET" value="westwood LET">westwood LET</option>
  103. <option style="font-family:wide latin" id="widelatin" value="wide latin">wide latin</option>
  104. </select>
  105. <br><br>Test Area (-- Write Your Example Text In The Box Right Below):</p>
  106.  
  107. <textarea onkeyup="textbox(this)" rows = '1' cols = '142'>
  108. --
  109. </textarea>
  110. <div id="example">>>>   Preview Example Text Here...</div><br><br>
  111.  
  112. <script src="http://code.jquery.com/jquery-1.5.js"></script>
  113. <script>
  114. function textbox(val) {
  115. $('#example').text(val.value);
  116. };
  117. </script>
  118. <center id='example'>
  119. "The Quick Brown Fox Jumped Over The Lazy Brown Dog?!"<br><br>
  120. 1234567890<br>
  121. !?@#$%^&*()_+-={}[]:";'<>,.~<br>
  122. ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
  123. abcdefghijklmnopqrstuvwxyz
  124. </center><br><br>
  125. </html>
  126. <font size=1pt face="arial" color=#FF2400>1p arial - </font>
  127. <font size=2pt face="arial" color=#FF2400>2p arial - </font>
  128. <font size=3pt face="arial" color=#FF2400>3p arial - </font>
  129. <font size=4pt face="arial" color=#FF2400>4p arial - </font>
  130. <font size=5pt face="arial" color=#FF2400>5p arial - </font>
  131. <font size=6pt face="arial" color=#FF2400>6p arial - </font>
  132. <font size=7pt face="arial" color=#FF2400>7p arial (maximum size) </font><br><br>
  133. <TABLE BORDER="0"><TR>
  134.  
  135. <TD bgcolor="#0000FF" align="center"><font size=2 face="tahoma, arial" color="yellow"><B>Fonts</b></FONT></TD>
  136. <TD bgcolor="yellow" align="center"><font size=2 face="tahoma, arial" color="#0000FF"><B>ABC123</b></FONT></TD>
  137. </TR><TR>
  138. <TD VALIGN="top">
  139.  
  140. <style>
  141.     LI {
  142.         font: 18px Helvetica, sans-serif;
  143.         margin: 5px;
  144.         height: 21px;
  145.     }
  146. </style>
  147.  
  148. <OL>
  149. <LI>verdana
  150. <LI>comic sans ms
  151. <LI>lucida console
  152. <LI>monospace
  153. <LI>georgia
  154. <LI>arial
  155. <LI>times new roman (default)
  156. <LI>tahoma
  157. <LI>trebuchet ms
  158. <LI>impact
  159. <LI>wingdings
  160. <LI>symbol
  161. </OL>
  162.  
  163. </TD><TD VALIGN="top">
  164. <OL>
  165. <LI><FONT face="verdana">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  166. <LI><FONT face="comic sans ms">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  167. <LI><FONT face="Lucida Console">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  168. <LI><FONT face="monospace">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  169. <LI><FONT face="georgia">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  170. <LI><FONT face="arial">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  171. <LI><FONT face="times new roman">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  172. <LI><FONT face="tahoma">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  173. <LI><FONT face="trebuchet MS">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  174. <LI><FONT face="impact">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  175. <LI><FONT face="wingdings">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  176. <LI><FONT face="symbol">ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</FONT>
  177. </OL>
  178. </TD>
  179. </TR></TABLE>
  180.  
  181. </body>
  182. </html>
  183.  
  184. <script type="text/javascript">
  185.     function font() {
  186.     var ff=document.getElementById('fontfamily');
  187.     ff.onchange=function() {
  188.     if (this.value!=null) {
  189.     document.body.style.fontFamily=this.value;
  190.     }
  191.     }
  192.     }
  193.     window.onload=font;
  194.    
  195.     $(document).ready(function () {    
  196.     var content = $('#mytextarea').val();
  197.     var display = $('#preview').val();
  198.     $('#mytextarea').keyup(function () {
  199.     display = content;
  200.     });
  201.     });
  202. </script>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!