Como adicionar vários arquivos de fonte para a mesma fonte?

Eu estou olhando para a página do MDC para a regra CSS @ font-face , mas eu não entendo nada. Eu tenho arquivos separados para negrito , itálico e negrito + itálico . Como posso incorporar todos os três arquivos em uma regra @font-face ? Por exemplo, se eu tiver:

 @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } 

O navegador não saberá qual fonte será usada para negrito (porque esse arquivo é o DejaVuSansBold.ttf), então será padronizado para algo que eu provavelmente não quero. Como posso dizer ao navegador todas as variantes diferentes que tenho para uma determinada fonte?

A solução parece ser adicionar várias regras @font-face , por exemplo:

 @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans.ttf"); } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Oblique.ttf"); font-style: italic, oblique; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-BoldOblique.ttf"); font-weight: bold; font-style: italic, oblique; } 

By the way, parece que o Google Chrome não sabe sobre o argumento de format("ttf") , então você pode querer pular isso.

(Essa resposta estava correta para a especificação CSS 2. O CSS3 permite apenas um estilo de fonte em vez de uma lista separada por vírgula.)

A partir do CSS3, a especificação mudou, permitindo apenas um único font-style . Uma lista separada por vírgula (por CSS2) será tratada como se fosse normal e sobrescreva qualquer input anterior (padrão). Isso fará com que as fonts definidas dessa forma apareçam em itálico permanentemente.

 @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans.ttf"); } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Bold.ttf"); font-weight: bold; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Oblique.ttf"); font-style: italic; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-BoldOblique.ttf"); font-weight: bold; font-style: italic; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-Oblique.ttf"); font-style: oblique; } @font-face { font-family: "DejaVu Sans"; src: url("fonts/DejaVuSans-BoldOblique.ttf"); font-weight: bold; font-style: oblique; } 

Na maioria dos casos, o itálico provavelmente será suficiente e regras oblíquas não serão necessárias se você tiver o cuidado de definir o que você usará e se ater a ele.

Se você estiver usando fonts do Google, sugiro o seguinte.

Se você quiser que as fonts sejam executadas a partir do seu localhost ou servidor, você precisa baixar os arquivos.

Em vez de baixar os pacotes ttf nos links de download, use o link ativo que eles fornecem, por exemplo:

 http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic 

Cole o URL em seu navegador e você deve obter uma declaração de fonte semelhante à primeira resposta.

Abra as URLs fornecidas, baixe e renomeie os arquivos.

Cole as declarações de face de fonte atualizadas com caminhos relativos aos arquivos de woff no seu CSS, e você está pronto.

Para ter a variação da fonte funcionando corretamente, eu tive que inverter a ordem de @ font-face no CSS.

 @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono-BoldOblique.ttf"); font-weight: bold; font-style: italic, oblique; } @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono-Oblique.ttf"); font-style: italic, oblique; } @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono-Bold.ttf"); font-weight: bold; } @font-face { font-family: "DejaVuMono"; src: url("styles/DejaVuSansMono.ttf"); } 

hoje em dia, 2017-12-17. Não encontrei nenhuma descrição sobre a necessidade do Font-property-order na especificação . E eu teste no chrome sempre funciona, seja qual for o pedido.

 @font-face { font-family: 'Font Awesome 5 Free'; font-weight: 900; src: url('#{$fa-font-path}/fa-solid-900.eot'); src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'), url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'), url('#{$fa-font-path}/fa-solid-900.woff') format('woff'), url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'), url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg'); } @font-face { font-family: 'Font Awesome 5 Free'; font-weight: 400; src: url('#{$fa-font-path}/fa-regular-400.eot'); src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'), url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), url('#{$fa-font-path}/fa-regular-400.woff') format('woff'), url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'), url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg'); } 
 /* # +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # dejavu sans # +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /*default version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */ src: local('DejaVu Sans'), local('DejaVu-Sans'), /* Duplicated name with hyphen */ url('dejavu/DejaVuSans.ttf') format('truetype'); } /*bold version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans-Bold.ttf'); src: local('DejaVu Sans'), local('DejaVu-Sans'), url('dejavu/DejaVuSans-Bold.ttf') format('truetype'); font-weight: bold; } /*italic version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans-Oblique.ttf'); src: local('DejaVu Sans'), local('DejaVu-Sans'), url('dejavu/DejaVuSans-Oblique.ttf') format('truetype'); font-style: italic; } /*bold italic version*/ @font-face { font-family: 'DejaVu Sans'; src: url('dejavu/DejaVuSans-BoldOblique.ttf'); src: local('DejaVu Sans'), local('DejaVu-Sans'), url('dejavu/DejaVuSans-BoldOblique.ttf') format('truetype'); font-weight: bold; font-style: italic; }