Um Mixin para Ajuste de Tamanho de Fonte

Qualquer pessoa que já trabalhou com webfonts customizadas provavelmente encontrou um problema em que precisava do font-size-adjust</code> property. Unfortunately, Firefox is the only major browser that supports it so far (late 2012).

O problema

Resumindo: você tem uma webfont personalizada em seu design. Se a webfont não for carregada ou suportada, a fonte padrão do backup (geralmente Arial) tem uma altura x muito diferente e todos os seus títulos e lugares onde você usa a webfont agora parecem estar gritando. Resumindo, há uma diferença gritante entre a aparência da webfont e a aparência das fontes alternativas.

A forma como o ajuste do tamanho da fonte visa resolvê-lo

<a href=”//webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/”> Outros explicaram isso melhor do que eu </a> (<a href = “// developer.mozilla.org/en-US/docs/CSS/font-size-adjust”>e Mozilla tem uma boa explicação também </a>), mas em geral, o valor para font-size-adjust</code> is meant as a scale factor of the font’s EM square. When I used an <a href="http://www.cs.tut.fi/~jkorpela/x-height.html">online tool</a> to calculate my custom font’s font-size-adjust</code>, it came out to be .435. </p>

Como esse valor representa a proporção relativa de uma fonte, não é muito útil ao tentar criar um pouco de matemática para uma função de bússola. Então, criei meu próprio método.

A solução

Calcule a diferença entre as fontes

Encontre o fator de escala da sua fonte com um teste simples: Coloque dois span</code>s next to each other at the same font-size, and with the browser Inspector, adjust the custom font until both look similar in size. If you adjusted the custom font to 110px, the ratio we need will be 1.1. If you made it smaller, the ratio is .95. Get it?

Código de amostra para criar um teste (na sintaxe SCSS):

.wrapper {
    color: black;

    span {
        font-size: 100px;
    }
    .custom-font {
        font-family: $alt-font;
    }
    .arial {
        font-family: Arial, sans-serif;
    }
}

Você não precisa usar minha marcação, mas esta é a ideia básica. Coloquei os x pequenos próximos um do outro para que fossem fáceis de comparar:

<div class=”wrapper”>
    <span class="custom-font">Xx</span>
    <span class="arial">xX</span>
</div>

Em seguida, manualmente, com o Firebug ou o inspetor do navegador, ajuste o tamanho do .custom-font</code> wrapper until the two samples look to be of similar height.

No meu caso, fazer a fonte customizada 115px combinou com a altura x de Arial. Como fator de escala, a função que criei usa 1,15, o equivalente decimal de 115%. Isso significa que quando a fonte personalizada é usada, ela precisa ser 15% maior do que a fonte padrão para parecer que tem o mesmo tamanho Esta foi uma maneira muito mais fácil para eu pensar sobrefont-size-adjust</code> and what that value means.

The Compass @mixin

Se você estiver usando uma ferramenta como <a href=” http://modernizr.com/download/”> Modernizr </a> e seu teste de detecção de recursos incluir um parafontface</code>, implementing this SCSS is easy. What the function does is set the font-size, but if there is fontface</code> support, it sets another font-size and scales it by the font-size-adjust-value. (<a href="http://www.projectevolution.com/activity/compass-scss-tricks-supporting-intention-font-size-adjust#fn1">This assumes some other things as well, I know. Read my full post with footnotes here.</a>)

$base-font-size: 16px; 
$font-size-adjust-value: 1.15; 

@mixin fontface-adjust( $pixel, $base-size:$base-font-size, $adjust-value: $font-size-adjust-value ) {
    /* Set a default value just in case */
    @if $adjust-value == none {
        $adjust-value: 1; 
    }
    /* Get rid of units, esp. since we are converting to EMs */
    $pixel: clear-units($pixel); 
    $base-size: clear-units($base-size);

   /* Output of the function */
    font-size: #{$pixel / $base-size}em;
    .fontface & {
        font-size: #{$pixel*$adjust-value / $base-size}em;
    }
}

O resultado é um Arial de tamanho normal para dispositivos sem fontface</code> support, and an adjusted font size for those that have fontface</code>, and, we assume, are using the custom font.

</p>

Espero que isso ajude aqueles de vocês que estão enfrentando um problema semelhante e desejam que font-size-adjust</code> had wider support by browsers. Until it has wider acceptance – once again – Compass and SCSS to the rescue (and Modernizr, too)!

Sinta-se à vontade para pedir emprestada a função “px2em” na qual esta nova função se baseia. A melhor parte sobre isso é a maneira como um novo valor para o tamanho da fonte de base pode ser passado quando os tamanhos de fonte foram aninhados. Por exemplo, tenho um H1 com um tamanho de fonte, mas quero fazer um<span></code> inside of it smaller. I can pass the pixel value of my H1 as the new base-font-size for which to make the <span></code>s EM calculation. </p>

@mixin px2em( $pixel, $base-size:$base-font-size ) {
    /* Remove units from the input for cleaner math */
    $pixel: clear-units($pixel); 
    $base-size: clear-units($base-size);
    @return #{$pixel / $base-size}em;
}

Exemplo de uso com aninhamento de valor EM:

h1 {
    /* The default $base-font-size is used here */
    font-size: px2em( 24px );

    span {
        /* Context has changed because of the way EM values are inherited. 
        * I now need to scale based upon the size of the H1 */
        font-size: px2em( 14px, 24px ); 
    } 
}