Alterar uma fonte "regular" com o peso da fonte em CSS torna-a realmente em negrito? (ou seja, outro arquivo de fonte)

Sou desenvolvedor web e estou trabalhando em um projeto que usa Quicksand Light / Regular / Bold como fonte. A fonte padrão do aplicativo Web é Quicksand regular, mas também há texto mais claro e mais forte.

Como desenvolvedor da Web, eu normalmente aplicaria um estilo CSS simples como este:

font-weight: bold; // or 400, 600, 800

Esse é um truque válido para evitar definir a fonte para cada elemento que não é "regular"? Caso contrário, existem fontes que funcionam assim? (ou seja, modifique-os via CSS para obter uma fonte diferente)

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.