HTML5, CSS3, ES6 WB@HCJ

Fonty Webowe

[@font-face]

„Real sites are made with webfonts.”

Kilka fontów pobranych z Google Fonts:

Przerobić przykład z tej strony:

Mozilla Developer Network:

Can I use @font-face?

Fonty z ikonkami:

YES or NO to Faux Bolding

[YES to Faux Bold]

Zaczynamy od przykładu:

<!doctype html>
<html lang=pl>
  <head>
    <meta charset=utf-8>
    <title>Say Yes to Faux Bolding</title>
    <link href='http://fonts.googleapis.com/css?family=Diplomata' rel='stylesheet'>
    <style>
      body { font-family: 'Diplomata', serif; }
    </style>
  </head>
  <body>
    <h1>Say Yes to Faux Bolding</h1>
    <p>Browsers can do terrible things to type.
  </body>
</html>

Fix:

h1, h2, h3 { font-weight: normal; font-family: 'Diplomata', serif; }
[NO to Faux Bold]

Ale takie rozwiązanie jest lepsze (tzw. duplicating @font-face rules trick: „tells the browser to use the same font file (specified with the src declaration) for both normal and bold font-weight when you apply the «DiplomataSCRegular» font-family”):

@font-face {
  font-family: DiplomataSCRegular;
  font-weight: bold;    /* get a bold fallback font when fallback happens */
  font-style:  normal;

  src: url('diplomatasc-regular.eot');
  src: url('diplomatasc-regular.eot') format('embedded-opentype'),
       url('diplomatasc-regular.woff') format('woff'),
       url('diplomatasc-regular.ttf') format('truetype'),
       url('diplomatasc-regular.svg#DiplomataSCRegular') format('svg');
}
h1, h2, h3 { font-family: DiplomataSCRegular, serif; }

Powyżej użyto, dla odmiany, fontu DiplomataSCRegular.

Uwaga: W katalogu css/faux-bold są pliki HTML ilustrujące to zagadnienie.