CSS font property example

dabblet.css

/**
 * CSS font property example
 * docs.webplatform.org/wiki/css/properties/font
 */

/*
  See http://css-tricks.com/snippets/css/better-helvetica
  and http://css-tricks.com/sans-serif
*/  
.example-one {
  /*    size  family    */
  font: 1.5em sans-serif;
}

.example-two {
  /*    style  variant    weight size/line-height family    */
  font: italic small-caps bold   1em/1.5em        sans-serif; 
}

.example-three {
  /*    weight size/line-height family                         */
  font: bold   1em/2em          "Times New Roman", Times, serif;
}

/* Extra styling for the example box. */
.example-box {
  margin: 1em auto;
  width: 50%;
  text-align: center;
}

dabblet.html

<div class="example-box">
  <p class="example-one">Example One: We ♥ WebPlatform Docs!</p>
  <p class="example-two">Example Two: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eos, dicta nihil aliquid quia dolores labore nesciunt unde consectetur blanditiis ex eius consequatur qui incidunt voluptatem inventore fugit quos amet!</p>
  <p class="example-three">Example Three: Eius, earum unde eum distinctio ex accusamus rem eligendi optio mollitia deleniti? Iure, accusamus, fuga ipsa quas doloremque enim velit sed est earum pariatur ab optio quia molestiae repellendus non.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}