| <style> |
| @font-face { |
| font-family: webkit-one; |
| font-style: italic; |
| src: local(Courier), local('Courier New'); |
| } |
| |
| @font-face { |
| font-family: webkit-one; |
| font-style: normal; |
| src: local(Helvetica), local(Arial); |
| } |
| |
| @font-face { |
| font-family: webkit-one; |
| font-style: italic; |
| font-weight: 700; |
| src: local(Papyrus); |
| } |
| |
| @font-face { |
| font-family: webkit-two; |
| font-style: italic; |
| src: url(../../resources/Ahem.ttf); |
| } |
| |
| @font-face { |
| font-family: webkit-three; |
| src: url(../../resources/Ahem.ttf); |
| } |
| |
| @font-face { |
| font-family: webkit-four; |
| font-style: normal; |
| src: url(../../resources/Ahem.ttf); |
| } |
| |
| @font-face { |
| font-family: webkit-five; |
| font-weight: 100; |
| src: url(../../resources/Ahem.ttf); |
| } |
| |
| @font-face { |
| font-family: webkit-six; |
| font-weight: 400; |
| src: local(Courier), local('Courier New'); |
| } |
| |
| @font-face { |
| font-family: webkit-six; |
| font-weight: 700; |
| src: local(Helvetica), local(Arial); |
| } |
| |
| @font-face { |
| font-family: webkit-six; |
| font-weight: 900; |
| src: local(Papyrus); |
| } |
| |
| @font-face { |
| font-family: webkit-seven; |
| font-weight: 300; |
| src: local(Courier), local('Courier New'); |
| } |
| |
| @font-face { |
| font-family: webkit-seven; |
| font-weight: 600; |
| src: local(Helvetica), local(Arial); |
| } |
| |
| @font-face { |
| font-family: webkit-eight; |
| font-weight: 100; |
| src: local(Courier), local('Courier New'); |
| } |
| |
| @font-face { |
| font-family: webkit-eight; |
| font-weight: 900; |
| src: local(Helvetica), local(Arial); |
| } |
| |
| div { border: 1px solid lightblue; margin: 4px; } |
| </style> |
| |
| <p> |
| Each font name in that font: |
| </p> |
| <div style="font-family: webkit-one;"> |
| <b>Helvetica bold</b> Helvetica <i>Courier syn. italic <b>Papyrus syn. bold syn. italic</b></i> |
| </div> |
| |
| <div style="font-family: webkit-six;"> |
| <span style="font-weight: 100">Courier</span> |
| <span style="font-weight: 200">Courier</span> |
| <span style="font-weight: 300">Courier</span> |
| <span style="font-weight: 400">Courier</span> |
| <span style="font-weight: 500">Courier</span> |
| <span style="font-weight: 600">Helvetica Bold</span> |
| <span style="font-weight: 700">Helvetica Bold</span> |
| <span style="font-weight: 800">Papyrus syn. bold</span> |
| <span style="font-weight: 900">Papyrus syn. bold</span> |
| </div> |
| |
| <div style="font-family: webkit-seven;"> |
| <span style="font-weight: 100">Courier</span> |
| <span style="font-weight: 200">Courier</span> |
| <span style="font-weight: 300">Courier</span> |
| <span style="font-weight: 400">Courier</span> |
| <span style="font-weight: 500">Courier</span> |
| <span style="font-weight: 600">Helvetica Bold</span> |
| <span style="font-weight: 700">Helvetica Bold</span> |
| <span style="font-weight: 800">Helvetica Bold</span> |
| <span style="font-weight: 900">Helvetica Bold</span> |
| </div> |
| |
| <div style="font-family: webkit-eight;"> |
| <span style="font-weight: 100">Courier</span> |
| <span style="font-weight: 200">Courier</span> |
| <span style="font-weight: 300">Courier</span> |
| <span style="font-weight: 400">Courier</span> |
| <span style="font-weight: 500">Courier</span> |
| <span style="font-weight: 600">Helvetica Bold</span> |
| <span style="font-weight: 700">Helvetica Bold</span> |
| <span style="font-weight: 800">Helvetica Bold</span> |
| <span style="font-weight: 900">Helvetica Bold</span> |
| </div> |
| |
| <p>Times followed by Ahem (normal):</p> |
| <div style="font-family: webkit-two;"> |
| Times <i>AHEM</i> |
| </div> |
| |
| <p>Ahem (normal):</p> |
| <div style="font-family: webkit-three;"> |
| AHEM <i>AHEM</i> |
| </div> |
| |
| <p>Ahem (normal) followed by Ahem (synthetic bold):</p> |
| <div style="font-family: webkit-five;"> |
| AHEM <b>AHEM</b> |
| </div> |
| |
| <p>Ahem (normal) followed by Ahem (synthetic italics):</p> |
| <div style="font-family: webkit-four;"> |
| AHEM <i>AHEM</i> |
| </div> |