CODEWITHSUNDEEP
csstype-hintingicon-fonts
aitor
aitor

Reputation: 2735

Icon font don't fit to pixel (sometimes)

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

enter image description here

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;
}

Upvotes: 0

Views: 108

Answers (2)

aitor
aitor

Reputation: 2735

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.

Upvotes: 1

Rapha&#235;l Vig&#233;e
Rapha&#235;l Vig&#233;e

Reputation: 2045

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.

Upvotes: 1

Related Questions