font-size.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <style>
  2. .text-tiny {
  3. font-size: 0.7em;
  4. }
  5. .text-small {
  6. font-size: 0.85em;
  7. }
  8. .text-big {
  9. font-size: 1.4em;
  10. }
  11. .text-huge {
  12. font-size: 1.8em;
  13. }
  14. </style>
  15. <div id="editor">
  16. <h2>Font <span class="text-big">Size</span> feature sample.</h2>
  17. <p>
  18. This is a mixed text with different sizes of text:
  19. <span class="text-tiny">tiny</span>,
  20. <span class="text-small">small</span>,
  21. <span class="text-big">big</span> and
  22. <span class="text-huge">huge</span>.
  23. </p>
  24. <ul>
  25. <li>It's a list item with <span class="text-tiny">tiny</span> text</li>
  26. <li>It's a list item with <span class="text-small">small</span> text</li>
  27. <li>It's a list item with <span class="text-big">big</span> text</li>
  28. <li>It's a list item with <span class="text-huge">huge</span> text</li>
  29. </ul>
  30. <figure class="image">
  31. <img src="sample.jpg" alt="CKEditor logo"/>
  32. <figcaption>
  33. Sample image with <span class="text-big">c</span><span class="text-tiny">r</span><span class="text-huge">a</span>z<span class="text-small">y</span> caption.
  34. </figcaption>
  35. </figure>
  36. </div>