JavaScript无缘无故更改字体粗细？

Question

Got a bit of a weird issue with a site I'm working on. When I load the homepage my fonts found within the navigation and headings seem to loose some font-weight for some reason. I've managed to narrow it down to a small piece of javascript that only loads on the homepage, when removed all my fonts are nice and fat.

In the javascript (made for a slider) it doesn't mention h tags at all, or anything to do with font-weight. But yet it still seems to be effecting it.

Here's the JS, if anyone can see why this might be happening?

var sliderActive = $("#wrapper #slider-single")

sliderActive.not(":first").removeClass("active");

sliderActive.on("hover", function() {
    sliderActive.removeClass("active");
    $(this).addClass("active");
});

That's it. Like I say, if I remove this file the fonts are fine. No idea why :S

The CSS for the class active affects the slider you see here: http://ember.lukeseager.com

.active .each {
    background-color: rgba(0,0,0,.1);
    -moz-transition: .3s ease; -webkit-transition: .3s ease; 
    -o-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease;
}
.active .home_video {
    top: 0px;
    z-index: 0;
}

Any info you guys have would be amazing! Thanks!

EDIT: Testing this across browsers, it seems to just be an issue on Chrome (only tested on Mac so far). Maybe it's just a browser rendering issue?

Answer 1

It's likely that the CSS class .active is defined to have another font-weight. SO when you add that class, the font-weight changes. Please double check your CSS via a Code Inspector after the script was executed.

Answer 2

It's in the http://ember.lukeseager.com/wp-content/themes/ember/css/reset.css file:

h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }

UPDATE:

Are you sure it's font-weight you're talking about, and not font-size? typography.css contains:

.slider-heading { font-size: 1em !important; }

The !important flag makes this override the following from layout.css:

.each h2 { font-size: 18px; }