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

454

Estou olhando a página MDC para a regra CSS @ font-face , mas não entendo nada. Tenho arquivos separados para negrito , itálico e negrito + itálico . Como posso incorporar todos os três arquivos em uma @font-faceregra? 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 é DejaVuSansBold.ttf), portanto, será padronizado para algo que provavelmente não quero. Como posso informar ao navegador todas as diferentes variantes que tenho para uma determinada fonte?

Felix
fonte
Como extensão da pergunta, se usarmos essas fontes em editores WYSIWYG como o TinyMCE, ainda precisamos do negrito itálico? Apesar do TinyMCE ter buttongs para fazer negrito itálico? Minha resposta de palpite é SIM - porque, internamente, eles procuram esses arquivos?
Nishant #
possível duplicata de Como mesclar fontes?
user2284570

Respostas:

749

A solução parece ser adicionar várias @font-faceregras, 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;
}

A propósito, parece que o Google Chrome não sabe sobre o format("ttf")argumento, então você pode pular isso.

(Esta 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.)

Felix
fonte
130
A ordem é importante, o estilo negrito / itálico deve vir por último.
The Who
8
Vale ressaltar que isso não funciona no IE8 (e abaixo), mesmo se você usar um EOT. O IE fará o download do tipo de letra alternativo, mas não o usará; em vez disso, fará com que o estilo de fonte normal seja negrito / itálico. Além disso, Chrome 11 parece falhar tornar um tipo de letra que é tanto negrito e itálico
JaffaTheCake
2
Este exemplo funciona perfeitamente para fontes que possuem um arquivo TTF separado para negrito e itálico. Mas e se a fonte inteira estiver em um arquivo .ttf e você desejar usar negrito, como isso funciona?
2
Este artigo faz um ótimo trabalho explicando por que isso funciona. Trecho da chave: "Observe que a propriedade família da fonte é o mesmo nome para todas as quatro fontes. Além disso, o estilo da fonte e o peso da fonte correspondem à fonte. Nota: O peso normal deve estar no topo da lista! Não achamos que a ordem depois disso seja importante. "
JD Smith
13
Eu estava tendo problemas com isso cortado no navegador incorporado Android 4.4. Acabou de mudar font-style: italic, oblique;para apenas font-style: italic;parecia consertar tudo.
Xavi
59

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 normale substituirá qualquer entrada anterior (padrão). Isso fará com que as fontes definidas dessa maneira 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 as regras oblíquas não serão necessárias se você tomar o cuidado de definir o que será usado e cumpri-lo.

Josiah
fonte
Eu acredito que as terceira e quarta fontes estão nomeadas incorretas, elas devem ter "Itálico" em vez de "Oblíquo".
Nathan Merrill
3
@ NathanMerrill como no OP: I have separate files for bold, italic and bold + italic- então existem três arquivos diferentes. Essa resposta corrige a resposta aceita, que font-style: italic, oblique;não é mais válida, mas também a resposta usada no mesmo arquivo para itálico e oblíquo. Ainda assim, vale ressaltar que o arquivo é compartilhado em dois casos.
Silly Freak #
18

Para que a variação da fonte funcionasse corretamente, tive que inverter a ordem do @ 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");
}
Cedric Simon
fonte
Muito útil. +1
Sr. Polywhirl 18/11/19
O que você quer dizer com "reverter a ordem" ?
Nyxynyx
15

hoje em dia, 17/12/2017. Não encontrei nenhuma descrição sobre a necessidade de Font-property-order nas especificações . E eu testei no chrome sempre funciona independentemente da ordem.

@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');
}
xlaoyu.Lee
fonte
13

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

Se você deseja que as fontes sejam executadas no seu host ou servidor local, é necessário fazer o download dos arquivos.

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

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

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

Abra os URLs fornecidos, faça o download e renomeie os arquivos.

Cole as declarações de face da fonte atualizadas com caminhos relativos aos arquivos woff no seu CSS e pronto.

Dieter Gribnitz
fonte
3
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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;
}
Jerry T
fonte
1

Não se esqueça que para variante em negrito é font-weight; para a variante itálica, éfont-style

Ooker
fonte
Não muito relacionado com o problema e @font-face, por isso estou tentando downvote esta resposta (mas eu não posso, eu não tenho reputação suficiente)
FryingggPannn
Sim, não é uma resposta para a pergunta, mas uma coisa boa a ser lembrada ao aplicar as respostas. O problema é que a seção de comentários da resposta já tem muitas, então essa dica seria enterrada
Ooker
Ok, então eu não sabia disso
FryingggPannn