As fontes da web são fantásticas, mas se as definirmos para um tamanho menor, poderemos ver alguns pixels e ficarão ruins.
Isso é o que obtemos do gerador de fontes
@font-face {
font-family: 'icons';
src: url('fonts/icons.eot');
src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
url('fonts/icons.woff') format('woff'),
url('fonts/icons.ttf') format('truetype'),
url('fonts/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
E é assim que deve ser se quisermos ícones / fontes suaves:
@font-face {
font-family: 'icons';
src: url('fonts/icons.eot');
src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
url('fonts/icons.svg#icons') format('svg'),
url('fonts/icons.woff') format('woff'),
url('fonts/icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Apenas mova svg antes de woff.
Antes:
Depois de:
Como você pode ver, alguns ícones ficam melhores quando estão crocantes.
Podemos criar uma classe especial para ícones crocantes. Veja como fazer isso:
@font-face {
font-family: 'icons';
src: url('fonts/icons.eot');
src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
url('fonts/icons.svg#icons') format('svg'),
url('fonts/icons.woff') format('woff'),
url('fonts/icons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'icons-crisp';
src: url('fonts/icons.eot');
src: url('fonts/icons.eot?#iefix') format('embedded-opentype'),
url('fonts/icons.woff') format('woff'),
url('fonts/icons.ttf') format('truetype'),
url('fonts/icons.svg#icons') format('svg');
font-weight: normal;
font-style: normal;
}
.i:before {
font-family: 'icons';
font-style: normal;
display: inline-block;
line-height: 1;
font-size: 1.25em;
margin-right: .25em;
}
.i--crisp:before {
font-family: 'icons-crisp';
}