how to change 'inner' lineheight of css text


Tags: html,css,css3,fonts,font-face

Problem :

I'm trying to work with an icon font called entypo. The font is great, but the padding that the developer chose is horrendous, and makes this font infuriating to work with. The icons are really good though and I'm just trying to make it work.

What it boils down to to make the font look 'normal', the font size needs to be huge (like 40px+).

If you're trying to fit the icon into a space of 15px height, the font-size will be 40px and then there is all that extra space you need to deal with.

I have tried setting explicit height, explicit lineheight, vertical-align, in every conceivable combination, and the result is differenct between PC and mac.

The only thing I can think of is that 'leftover space' is handled differently by different operating systems.

Is there some CSS property that I'm not aware of that will fix this?

PC

enter image description here

MAC

enter image description here

This is the very hackish CSS I used to try and zero it out as best I could. Keep in mind I've already tried playing with height and lineheight, it always is the same problem, PC always puts it way below where mac puts it.

.icon {
    font-family: 'entypo';
    display: inline-block;
    color: #000;
    font-size: 40px;
    line-height: 0;
    height: 0;
    vertical-align: middle;   
}

For the sake of those images above to demo to you guys, these are the properties I added: height: 20px; width: 20px; background: red; only to demonstrate how it renders so differently.



Solution :

I've been having the same issue. I'm not sure my solution is all that great, but I'll post it to see if we can get some discussion started.

.icon {
  font-family: 'Entypo';
  position: absolute;
  font-size: 40px;
  height: 20px;
  width: 20px;
  margin-left: -20px;  /* This will force it to live before the containing element, so the container may need 20px of padding-left */
  margin-top: -1px;    /* Just because it was still sitting one pixel to low for my eye */
  text-align: center;

}

I'm hopeful someone has an idea of how to accomplish this without having to add the padding to the containing element. However, it was the only way I could make this work with the absolute positioning which is what seems to allow us to "trim" the extra padding on the icon character.


    CSS Howto..

    How to fix specific div's position in CSS

    How to use CSS to square the corner on a submit button

    Why does this qtip2 show blank content on 2nd click?

    How to fade multiple background colors after few seconds? [duplicate]

    How do I design a css gradient to look like the attached Facebook Login screen

    How to position this using only CSS and no tables

    Jquery Toggle Button image and Div Show/Hide

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    how to define style for a group of child elements from parent element's style?

    How to change CSS of an element on hide/show of another element(without custom events)?

    How to select an item that is into another item using CSS?

    How to highlight anchor link when target div comes in view - jQuery

    How to changes styles on first elements using CSS

    How to vary the tone of an image dynamically using only css?

    html/css: how to on a single line center “title” and have on right buttons

    how to create circle that cut off one piece with css

    How to change this table layout to a css layout?

    How do I make a div take the remaining height of a parent?

    CSS how to position element fixed just for y-axis?

    How to center absolute div (text) above relative div (image) responsively?

    How to pass a local file name to css-validator.jar?

    How do you find the dimensions of a “display: none” element?

    CSS 'schema' how-to

    How to let 3 div columns extend the height until hit the bottom of the page?

    how to center a webpage in CSS

    How can I vertically align the text on these CSS buttons?

    How to Remove the Awkward Margin to the Left of my Unordered List?

    How can I stop an image element from taking 100% width?

    How do I center “my” navigation bar?

    How to find the relevant stylesheet for a specific CSS code [closed]