Fontes da Web
Existem duas maneiras de definir fontes da web @font-face. O primeiro, e provavelmente o mais comum (acredito que a maioria dos geradores, o Font Squirrel, por exemplo, produzirá isso) é definir cada arquivo de fonte (ou seja, cada peso e estilo) com seu próprio nome de família exclusivo.
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontBold';
src: url('your_font_bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFontItalic';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Observe que o font-weighte font-styleem cada um está definido como normal e cada um tem um font-familynome exclusivo . Isto significa que qualquer vez que você definir uma font-weightou font-stylea outra coisa do que o normal você está recebendo navegador implementado "falso" estilos, não os estilos do arquivo de fonte correta. Isso também pode levar a "dobrar" negrito ou itálico se você não redefinir os estilos CSS do navegador padrão para 'normal'. Por exemplo:
strong {
font-family: 'YourFontBold';
}
Sem redefinir o font-weightnormal, isso ficará mais ousado do que deveria, uma vez que o navegador está carregando o arquivo de fonte negrito e adicionando seu próprio estilo negrito falso, já que o estilo padrão strongé font-weight: bold;.
Uma maneira melhor:
@font-face {
font-family: 'YourFont';
src: url('your_font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'YourFont';
src: url('your_font_italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
Observe a definição font-weighte font-stylecorresponda ao arquivo de fonte corretamente e todos usam o mesmo font-familynome. Declarar suas fontes dessa maneira significa que você pode usar font-weighte font-styleem qualquer lugar no seu CSS exatamente como você esperaria e obterá a fonte correta, sem estilos "falsos".
Somente as palavras-chave "negrito" e "itálico" provavelmente serão entendidas por todos os navegadores; portanto, você deve usar o número de peso da fonte específico. Lembre-se também de que os navegadores geralmente não arredondam bem o peso das fontes, portanto, especifique exatamente o peso desejado e verifique se eles correspondem aos @font-faceestilos de declaração e CSS.
O problema com esse método é que o Internet Explorer 8 ou inferior não reconhece vários estilos e pesos que usam o mesmo font-familynome. Eu acredito que isso também causou problemas nas versões mais antigas do iOS
O Google Fonts contorna isso fornecendo condicionalmente o IE 8 ou inferior apenas com a fonte regular e deixando o IE "falsificar" os outros estilos. Não é ideal.
Este artigo no smashingmagazine.com sugere adicionar condicionalmente os estilos separadamente para o Internet Explorer, que deve contornar o problema de vários pesos e estilos:
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->
Portanto, se você deseja usar font-weighte font-styleem seu CSS sem se preocupar com o nome real da fonte, não confie nos geradores de fontes da Web e configure a @font-facedeclaração corretamente, e saiba que isso causará problemas nos navegadores mais antigos.
Fontes da área de trabalho
Declarar fontes que não são incorporadas usando @font-faceusará apenas as fontes instaladas no computador dos usuários. Estes devem respeitar qualquer font-weighte font-styleestilos e carregar as fontes corretas (Todos os meus testes no Chrome e Firefox no OS X funcionam como esperado), mas isso pode depender de navegador e sistema operacional, e vai depender da nomenclatura das fontes dentro dos arquivos de fontes próprias - coisas sobre as quais você realmente não tem controle.