cheshirecatalyst cheshirecatalyst - 3 months ago 8
CSS Question

Font display discrepancy safari 9.1.3

So I have two code elements both are styled the exact same way, both have the exact same computed styles in the safari inspector:

-webkit-box-direction: normal;
color: rgb(213, 93, 33);
display: inline;
font-family: monospace, monospace;
font-size: 14px;
font-weight: normal;
height: auto;
line-height: 21px;
text-align: center;
white-space: pre;
width: auto;


The abov css is for the span that colors the word 'setf' in both pictures.

The only difference is one is nested in a section>aside>header>nav>pre>code:
example 1

And the other is nested in the same section but then main>section>pre>code:
enter image description here

Clearly the font weight in the second one is greater, but there is no accompanying style rule I can find anywhere (i'd provide more of the css but it is a messy mix of a normalizer and some stuff). Is there something I should look for that doesn't show up in the computed styles?

Working reference for site is here: example

The left has the thinner example and the bottom of the page has the pagination element. Any help would be greatly appreciated.

Answer

This looks to me like it might be a font smoothing problem. Does adding

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

fix it?

(note: for some reason I first thought you were seeing that difference between two browsers. If this is helpful that's great, but it now seems unlikely to me)