CODEWITHSUNDEEP
htmlcssfontssafari
cheshirecatalyst
cheshirecatalyst

Reputation: 379

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, and the other is nested in the same section but then main>section>pre>code:

full screenshot

Here are details:

Sidebar

crisp

Footer

fuzzy

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.

Upvotes: 1

Views: 67

Answers (1)

henry
henry

Reputation: 4385

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)

Upvotes: 1

Related Questions