Podem ser definidos vários pesos de fonte com uma única consulta @font-face?

A fonte Klavika vem em vários pesos e formas. Eles podem ser importados para CSS com uma única consulta @font-face que especifica o peso?

Solução:

Apresentando um recurso versátil do @font-face, você pode associar diferentes estilos e pesos a um único nome de família de fontes:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");  /* Normal weight, normal style */
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype"); /* Normal weight, italic style */
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");  /* Bold weight, normal style */
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype"); /* Bold weight, italic style */
}

Agora você pode especificar font-weight:bold ou font-style:italic para diferentes elementos:

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

Para obter detalhes abrangentes sobre esse recurso, consulte a documentação oficial.

Exemplo:

[Example Pen](https://codepen .io/anon/pen/EjxVqv)