css_letter_spacing.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  5. <style>
  6. p {
  7. font-size: 150%;
  8. }
  9. div {
  10. page-break-after: always;
  11. }
  12. .example5 {
  13. letter-spacing: 5px;
  14. }
  15. .example4 {
  16. letter-spacing: 4px;
  17. }
  18. .example3 {
  19. letter-spacing: 3px;
  20. }
  21. .example2 {
  22. letter-spacing: 2px;
  23. }
  24. .example1 {
  25. letter-spacing: 1px;
  26. }
  27. .example_1 {
  28. letter-spacing: -1px;
  29. }
  30. .example_2 {
  31. letter-spacing: -2px;
  32. }
  33. .example_3 {
  34. letter-spacing: -3px;
  35. }
  36. .example_4 {
  37. letter-spacing: -4px;
  38. }
  39. .example_5 {
  40. letter-spacing: -5px;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div style="text-align: left;">
  46. <p class="example5">This has <strong>letter spacing</strong> of 5px</p>
  47. <p class="example4">This has <strong>letter spacing</strong> of 4px</p>
  48. <p class="example3">This has <strong>letter spacing</strong> of 3px</p>
  49. <p class="example2">This has <strong>letter spacing</strong> of 2px</p>
  50. <p class="example1">This has <strong>letter spacing</strong> of 1px</p>
  51. <p>This has <strong>normal letter</strong> spacing</p>
  52. <p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
  53. <p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
  54. <p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
  55. <p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
  56. <p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
  57. </div>
  58. <div style="text-align: right;">
  59. <p class="example5">This has <strong>letter spacing</strong> of 5px</p>
  60. <p class="example4">This has <strong>letter spacing</strong> of 4px</p>
  61. <p class="example3">This has <strong>letter spacing</strong> of 3px</p>
  62. <p class="example2">This has <strong>letter spacing</strong> of 2px</p>
  63. <p class="example1">This has <strong>letter spacing</strong> of 1px</p>
  64. <p>This has <strong>normal letter</strong> spacing</p>
  65. <p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
  66. <p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
  67. <p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
  68. <p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
  69. <p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
  70. </div>
  71. <div style="text-align: center;">
  72. <p class="example5">This has <strong>letter spacing</strong> of 5px</p>
  73. <p class="example4">This has <strong>letter spacing</strong> of 4px</p>
  74. <p class="example3">This has <strong>letter spacing</strong> of 3px</p>
  75. <p class="example2">This has <strong>letter spacing</strong> of 2px</p>
  76. <p class="example1">This has <strong>letter spacing</strong> of 1px</p>
  77. <p>This has <strong>normal letter</strong> spacing</p>
  78. <p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
  79. <p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
  80. <p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
  81. <p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
  82. <p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
  83. </div>
  84. <div style="text-align: justify;">
  85. <p class="example5">This has <strong>letter spacing</strong> of 5px. This has <strong>letter spacing</strong> of 5px. This has <strong>letter spacing</strong> of 5px. </p>
  86. <p class="example4">This has <strong>letter spacing</strong> of 4px. This has <strong>letter spacing</strong> of 4px. This has <strong>letter spacing</strong> of 4px. </p>
  87. <p class="example3">This has <strong>letter spacing</strong> of 3px. This has <strong>letter spacing</strong> of 3px. This has <strong>letter spacing</strong> of 3px. </p>
  88. <p class="example2">This has <strong>letter spacing</strong> of 2px. This has <strong>letter spacing</strong> of 2px. This has <strong>letter spacing</strong> of 2px. </p>
  89. <p class="example1">This has <strong>letter spacing</strong> of 1px. This has <strong>letter spacing</strong> of 1px. This has <strong>letter spacing</strong> of 1px. </p>
  90. <p>This has <strong>normal letter</strong> spacing. This has <strong>normal letter</strong> spacing. This has <strong>normal letter</strong> spacing. </p>
  91. <p class="example_1">This has <strong>letter spacing</strong> of -1px. This has <strong>letter spacing</strong> of -1px. This has <strong>letter spacing</strong> of -1px. </p>
  92. <p class="example_2">This has <strong>letter spacing</strong> of -2px. This has <strong>letter spacing</strong> of -2px. This has <strong>letter spacing</strong> of -2px. </p>
  93. <p class="example_3">This has <strong>letter spacing</strong> of -3px. This has <strong>letter spacing</strong> of -3px. This has <strong>letter spacing</strong> of -3px. </p>
  94. <p class="example_4">This has <strong>letter spacing</strong> of -4px. This has <strong>letter spacing</strong> of -4px. This has <strong>letter spacing</strong> of -4px. </p>
  95. <p class="example_5">This has <strong>letter spacing</strong> of -5px. This has <strong>letter spacing</strong> of -5px. This has <strong>letter spacing</strong> of -5px. </p>
  96. </div>
  97. </body> </html>