Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

html - Why is iOS Safari adding extra letter-spacing?

I think I have found a web rendering bug for Google Fonts in Mobile (iOS 8) Safari. It seems to me that Mobile Safari adds a tiny bit of letter-spacing to all text that uses Google Fonts, or that it uses another font. It doesn't matter which Google Font I try (Open Sans). It renders correctly on all modern browsers. Tested Android, FF, Chrome, Safari.

Try to load this page on a iOS device to see what I mean. See also see code and screenshot. See this link for live review: https://dl.dropboxusercontent.com/u/430406/Temp%20%5Bok%20to%20delete%5D/Checking%20Font/index.html

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>

<body>
  <h2 style="font-family: 'Roboto'">Roboto: Looks like it gets a bit extra line-spacing in iOS Safari, though this is not possible to find in web inspector</h2>
  <h2 style="font-family: 'Arial'">Arial: Works fine in iOS Safari</h2>
</body>

</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I found the solution in this question: iOS 4.2+ webfont (ttf) 's bold font-weight rendering bug

Mobile Safari is buggy rendering faux font weights, if you don't set the font-weight (to eg. font-weight: 400 or font-weight: normal) You need to specifically set the css font weight for it to render correctly in mobile safari.

This is the solution.

h2 {
  font-weight: 400;
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...