Make your HTML look like it's typeset with LaTeX

LaTeX-skin.css

/* 
 * LaTeX-skin.css
 * (c) Lingdong Huang 2018
 * Make your HTML look like it's typeset with LaTeX
 * 
 * Features:
 * - LaTeX look and feel, including its font Computer Modern;
 * - Automatic numbering of (sub)sections and figures;
 * - Print / export to PDF, (On macOS Safari/Chrome, File > Print)
 */

@font-face {
  font-family: 'CMU Serif Roman';
  src: url(fonts/cmunrm.ttf), url(http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunrm.otf);
}

@font-face {
  font-family: 'CMU Serif Italic';
  src: url(fonts/cmunti.ttf), url(http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunti.otf);
}

@font-face {
  font-family: 'CMU Serif Bold';
  src: url(fonts/cmunbx.ttf), url(http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbx.otf);
}

@font-face {
  font-family: 'CMU Typewriter Text Regular';
  src: url(fonts/cmuntt.ttf), url(http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf);
}

:root {
    margin: 0px;
    background: silver;
}

body{
    font-family: 'CMU Serif Roman';
    margin: 0px;
    width:5.5in;
    padding: 1.5in;
    font-size: 12;
    font-weight:normal;
    background:white;
    text-align:justify;
    counter-reset: h2cnt;
    counter-reset: h3cnt;
    counter-reset: h4cnt;
    counter-reset: figcnt;
}

h1{
    font-family: 'CMU Serif Roman';
    font-style: normal;
    font-weight:normal;
    text-align: center;
    font-size: 22;
    counter-reset: h2cnt;
}
h2{
    font-family: 'CMU Serif Bold';
    font-style: normal;
    font-weight:normal;
    font-size: 18;
    counter-reset: h3cnt;
}
h3{
    font-family: 'CMU Serif Bold';
    font-style: normal;
    font-weight:normal;
    font-size: 16;
    counter-reset: h4cnt;
}
h4{
    font-family: 'CMU Serif Bold';
    font-style: normal;
    font-weight:normal;
    font-size: 13;
}

strong{
    font-family: 'CMU Serif Bold';
    font-style: normal;
    font-weight:normal;
}
em{
    font-family: 'CMU Serif Italic'; 
    font-style: normal;
    font-weight:normal;
}
code{
    font-family: 'CMU Typewriter Text Regular'; 
    font-style: normal;
    font-weight:normal;
}
pre{
    font-family: 'CMU Typewriter Text Regular'; 
    font-style: normal;
    font-weight:normal;
}
figure{
    padding:10px;
}
figcaption{
    padding:10px;
    text-align: center;
}

h2:before {
    content: counter(h2cnt) "\0000a0\0000a0\0000a0";
    counter-increment: h2cnt;
    counter-reset: h3cnt;
}
h3:before {
    content: counter(h2cnt) "." counter(h3cnt) "\0000a0\0000a0\0000a0";
    counter-increment: h3cnt;
}
h4:before {
    content: counter(h2cnt) "." counter(h3cnt) "." counter(h4cnt) "\0000a0\0000a0\0000a0";
    counter-increment: h4cnt;
}
figcaption:before{
    content: "Figure " counter(figcnt) ":\0000a0";
    counter-increment: figcnt;
}