Múltiplos pesos de fonte, uma consulta @ font-face

118

Tenho que importar a fonte Klavika e a recebi em vários formatos e tamanhos:

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

Agora gostaria de saber se é possível importá-los para o CSS com apenas uma @font-face-query, onde estou definindo o weightna consulta. Quero evitar copiar / colar a consulta 8 vezes.

Então, algo como:

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

css fonts font-face

— Rvervuurt
fonte

Não é uma fonte ... são várias fontes ... então, infelizmente, acho que você teria que apenas sorrir e aguentar.

— Paulie_D

Sim, desculpe, são fontes diferentes dentro da mesma família.

— Rvervuurt

Vários arquivos de fonte da Web === pesos diferentes

— Eric

este artigo pode ajudar: 456bereastreet.com/archive/201012/… na verdade, há uma resposta SO aqui: stackoverflow.com/questions/10045859/… que usa esse artigo, uma alternativa para o que você quer, pois o que você quer não é possível.

— 97ldave

Respostas:

270

Na verdade, há um sabor especial de @ font-face que permitirá exatamente o que você está pedindo.

Aqui está um exemplo usando o mesmo nome de família de fontes com estilos e pesos diferentes associados a fontes diferentes:

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

Agora você pode especificar font-weight:boldou font-style:italicpara qualquer elemento de sua preferência sem precisar especificar a família de fontes ou substituir font-weighte font-style.

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

h1 { font-weight:bold; }

em { font-style:italic; }

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

Para uma visão geral completa desse recurso e do uso padrão, dê uma olhada neste artigo.

EXEMPLO DE CANETA

— maioman
fonte

exatamente como sugeri em meu comentário acima ;-)

— 97ldave

No meu caso, isso só usa a menor @ font-face. Isso seria a espessura da fonte: negrito; estilo da fonte: itálico; toda vez que me refiro à família de fontes: 'DroidSerif';

— Simon Arnold

Você tem um teste que prova que esse método está realmente funcionando? Como você provaria que o navegador não está apenas falsificando o peso ou o estilo sem ler o arquivo de fonte correto?

— rojobuffalo

@rojobuffalo aqui está um exemplo de caneta, está funcionando como esperado.

— maioman

@rojobuffalo mostra um ponto muito válido. A caneta não faz nada para verificar a validade da afirmação de que isso se comportará conforme o esperado. Especificamente, removi a declaração de fonte em negrito do exemplo CSS e a executei novamente. A aparência era idêntica. Ele estava puxando do cache? O navegador estava simplesmente alterando o peso exibido da fonte regular?

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}

— Mirka Nimsová
fonte

Escreva uma pequena explicação sobre por que isso resolveria o problema. Pode ser algo simples como uma frase.

— ggderas

Mesma solução da anterior. Apenas uma notação mais curta :)

— Mirka Nimsová

Onde posso ler sobre essas notações? Não vejo no MDN

— avalanche1

Parece não funcionar e não consigo encontrar um recurso, mas parece haver alguma verdade nisso.

— dakab