All geek questions in one place

CSS text displayed differently between OSX / Windows

EDIT: Example here: [Live example deleted - answer to question]

I am trying to display this header font the same way and it looks different between operating systems. All OSX and Ubuntu browsers display it the same way, but when I test it on a Windows computer, it displays differently. The way to display on OSX is how I want it to be displayed (with the tiny part of the bottom hidden behind the bottom element).

If I changed the CSS (add padding or line height), he fixed it for Windows, but twisted it for OSX.

Is there any work that is not related to the need to set special and special selectors on the page via javascript or something like that? I am trying to keep the code as clean as possible (i.e. the least dangerous fixes are possible).

CSS for the title and H1:

#header { height:70px; overflow:hidden; background-image: url('header-canvas2-bg.png'); background-repeat: repeat-x; background-attachment: fixed; } #header h1 { font-size: 100px; font-family:'Josefin Sans'; text-align: left; color:#ffffff; }

HTML for the title:

 <head> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700' rel='stylesheet' type='text/css'> <!--SNIP--> </head> <body> <div id="header"> <h1><a href="#">testing font</a></h1> </div> <!--SNIP--> </body>

Chrome on OSX displays

enter image description here

In Chrome on Win 7 are displayed

enter image description here

EDIT: Example here: [Live example deleted - answer to question]

+6
source share
2 answers

The culprit was the Google Web Font API. I downloaded the font manually and placed the font in my own domain, and the problem now disappeared.

Thus, there is some problem with the Google Web Fonts API, which leads to differences between operating systems.

This was what I found that suggested to me that this could be a problem: http://webdesignandsuch.com/fix-fonts-that-dont-work-with-google-font-api-in-internet-explorer- or-chrome-with-font-face /

In short, place your own font faces, and everything looks fine (tested on all common browsers on OSX, Win XP, Win 7 and Ubuntu).

+2
source

I would recommend using line-height in css, as well as reset the valid field and padding value ...

 #header h1 { font-size: 100px; line-height: 100px; /* adjust as necessary */ padding: 0; margin: 0; font-family:'Josefin Sans'; text-align: left; color:#ffffff; }
0
source

Source: https://habr.com/ru/post/896060/

More articles:


All Articles