CSS: come specificare una sola famiglia per tutti gli stili dei web font

Come possiamo usare i web font specificando una sola famiglia di font per tutti gli stili disponibili (bold, italic, light eccetera)? Ce lo spiega Google.

Google usa questo approccio:


@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Serif'), local('DroidSerif'), url(file.woff) format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Droid Serif Bold'), local('DroidSerif-Bold'), url(file.woff) format('woff');
}
@font-face {
  font-family: 'Droid Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Droid Serif Italic'), local('DroidSerif-Italic'), url(file.woff) format('woff');
}

Un solo valore per la proprietà font-family e diversi file e stili specificati nelle tre varianti. Possiamo usare lo stesso approccio per i nostri web font:


@font-face {
    font-family: 'Linux Libertine'; /* normal */
    src: url('LinLibertine_R-webfont.eot');
    src: url('LinLibertine_R-webfont.eot?#iefix') format('embedded-opentype'),
         url('LinLibertine_R-webfont.woff') format('woff'),
         url('LinLibertine_R-webfont.ttf') format('truetype'),
         url('LinLibertine_R-webfont.svg#LinuxLibertineORegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Linux Libertine'; /* italic */
    src: url('LinLibertine_RI-webfont.eot');
    src: url('LinLibertine_RI-webfont.eot?#iefix') format('embedded-opentype'),
         url('LinLibertine_RI-webfont.woff') format('woff'),
         url('LinLibertine_RI-webfont.ttf') format('truetype'),
         url('LinLibertine_RI-webfont.svg#LinuxLibertineOItalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'Linux Libertine'; /* bold */
    src: url('LinLibertine_RB-webfont.eot');
    src: url('LinLibertine_RB-webfont.eot?#iefix') format('embedded-opentype'),
         url('LinLibertine_RB-webfont.woff') format('woff'),
         url('LinLibertine_RB-webfont.ttf') format('truetype'),
         url('LinLibertine_RB-webfont.svg#LinuxLibertineOBold') format('svg');
    font-weight: bold;
    font-style: normal;

}

Ringraziamo Google per questo prezioso suggerimento.

Torna su