Grow your CSS skills. Land your dream job.

Custom font and line-height in -webkit- browsers

  • # January 29, 2013 at 4:00 am

    For the site company buy a custom font set.
    It was pretty good, and rendering is normal, but in “chrome”, “chromium”, “safari” i have problems with “vertical-align:middle;”
    webkit do not center vertically, i use -webkit-min-device-pixel-ratio:0 hack: but for all 3 browsers i need different “line-height” values for centering.
    This problem on all site elements? where i use custom fonts.
    (Arial – centers absolutly perfect)
    Do somebody knows methods of fix this?
    Sorry for my bad English.
    [View of the problem](http://uaimage.com/t/2648300_ea98c5bc.jpg “View of the problem”)

    # January 29, 2013 at 4:20 am

    @strangerliquid Set the line-height to the same value as the container height.

    # January 29, 2013 at 4:51 am

    Not work. I try everysthing:
    display:table-cell;
    vertical-align;
    even padding;
    font is rendering is little top from the line

    # January 29, 2013 at 5:04 am

    We need to see a link or perhaps you could put a reduced case in Codepen.

    # January 29, 2013 at 5:21 am

    Sometimes when adding the line-height above the font property will cause it to not render.

    As @Paulie_D suggested, it would be best if we could see the code.

    Here’s an example: http://codepen.io/chrisburton/pen/BKipl

    # January 29, 2013 at 5:40 am

    @Paulie_D @chrisburton thaks you guys. But i run clean html/css with proper reset. And i see that font is renrerin above the line. Font is fu……n s….t. I will connect to designer to solve this problem.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".