0

I'm having a very strange issue. Luckily you can see the problem, I've uploaded the files here:

http://www.unf.edu/~n00804716/untitled%20folder/index.html

THIS NEEDS TO BE VIEWED IN SAFARI. To fully understand what the type face is supposed to look like, in other browsers it does not change, so you only see the bold version.

On this site, I am implementing a hover with .addClass. When you hover over the top bar, which are any of the colored boxes with numbers in it, you will see that the logos under neath the bar slide up and lose their opacity. My real problem is with font-weight. When you hover over the top bar, you can see that all of the white text loses a little bit of weight, becomes thinner. And then when the animation is done, it returns to a bolder appearance. The true look of the type face is the thinner version, and I cannot find a way to get the type face to look that way.

I have tried font-weight: normal on nearly every element in the DOM but still can't get it to work. I also tried applying this rule to the body:

-webkit-font-smoothing: subpixel-antialiased;

But that just prevents the type from getting thinner on hover, and keeps it bolder in both states. You can easily view the CSS and HTML for each element within web inspector when looking at the page I linked above. I know this has to be a simple problem, I just can't seem to figure it out.

Here is the CSS for my @font-face rule. The type face is Din Next LT Pro UltraLight Condensed for the larger numbers and Din Next Pro Bold for the smaller copy:

@font-face {
    font-family:'DINNextLTPro-UltraLightCond';
    src: url('fonts/DINNextLTPro-UltraLightCond_gdi.eot');
    src: url('fonts/DINNextLTPro-UltraLightCond_gdi.eot?#iefix') format('embedded-opentype'),
        url('fonts/DINNextLTPro-UltraLightCond_gdi.woff') format('woff'),
        url('fonts/DINNextLTPro-UltraLightCond_gdi.ttf') format('truetype'),
        url('fonts/DINNextLTPro-UltraLightCond_gdi.svg#DINNextLTPro-UltraLightCond') format('svg');
    font-weight: 250;
    font-style: normal;
    font-stretch: condensed;
    unicode-range: U+0020-25CA;
}
Austin Branham
  • 173
  • 3
  • 16
  • I might be blind but i cannot notice a difference. What browser are you using? – C.Schubert Nov 05 '15 at 23:22
  • @user3515065 Oops completely forgot to mention that you need to view it in safari. Haven't checked it in FF, but it was not happening in Chrome – Austin Branham Nov 05 '15 at 23:24
  • @user3515065 But regardless, any help in any browser where someone can make the font weight normal (thinner than it appears) is a huge help. – Austin Branham Nov 05 '15 at 23:24
  • 1
    Safari changes its font-smoothing on elements that are animated using transitions, likely to save ressources for performance. http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition – mlnmln Nov 05 '15 at 23:29
  • @mlnmln Thank you so much for sharing that question. – Austin Branham Nov 05 '15 at 23:43

1 Answers1

0

Forcing hardware acceleration on the parent element seems to solve the problem

-webkit-transform: translateZ(0px);
Austin Branham
  • 173
  • 3
  • 16