Icon font don't fit to pixel (sometimes)

Question

I built an icon font fitted to pixels but, when I try to use it, some times fit to pixels and other times does not.

In this example, three instances of the icon show diferent behavior. First instance fits, second an third does not. Why?

This example can be seen here: http://iac.e451.net/biblioteca-de-documentos.html

HTML

<div class="adjuntos">
  <a href="#">
      <span class="icon-doc-24"></span>
  </a>
  <a href="#">
      <span class="icon-doc-24"></span>
  </a>
  <a href="#">
      <span class="icon-doc-24"></span>
  </a>
</div>

CSS

.docs .doc .adjuntos {
  padding: 15px 50px;
  background-color: #555555;
}
.docs .doc .adjuntos a {
  display: inline-block;
  color: white;
  font-size: 24px;
  line-height: 24px;
}
.docs .doc .adjuntos a:hover {
  color: #b0adda;
}

score 1 · Answer 1 · answered Nov 17 '15 at 16:47

1

This is because of font smoothing. Try adding this :

-webkit-font-smoothing: auto;
font-smooth: auto;

To your .adjuntos span. It will solve your problem (on Chrome and Firefox), but will change a bit the rendering of the icons.

answered Nov 17 '15 at 16:47

Raphaël Vigée

2,048
14
27

1

Add my code in this class and remove `font-feature-settings: "liga"; -moz-osx-font-smoothing: grayscale; ` – Raphaël Vigée Nov 17 '15 at 17:09
I'm getting troubles adding font-smooth property. I'm working on a bootstrap less environment and, after run Grunt less tasks, these properties disappear at CSS file. Anyway, I did it at development tools of firefox. When I disable moz font smoothing, none of icons fit to pixel. When I put webkit and simple font-smooth: auto, there are no changes. This properties are shown as strikethrough (not rendered). https://www.dropbox.com/s/jncwfzala9jrq4q/Captura%20de%20pantalla%202015-11-17%2018.13.43.png?dl=0 – aitor Nov 17 '15 at 17:24

score 1 · Answer 2 · answered Nov 18 '15 at 08:04

1

After researching font smooth options (Thanks Raphaël for the help) through several browsers I came to the conclusion that problem is in the font building process. It is not a CSS issue.

I will try to research this build process.

answered Nov 18 '15 at 08:04

aitor

2,281
3
22
44

Icon font don't fit to pixel (sometimes)

2 Answers2