Font sizes in UIWebView does NOT match iOS font size

Question

Here's a UILabel which says "About". Set at exactly 17.7 in iOS.

Below it a UIWebView which also says "About". Also set at exactly 17.7 using css.

They don't match.

How to fix this correctly?

It is bizarre that in Apple's own UIWebView, the size basis is different?

Html to test...

<html><head>
<style type='text/css'>
body {
margin: 0px;
font-family: 'SourceSansPro-Light';
font-size: FONTPOINTSpt;
}
html { -webkit-text-size-adjust:none; }
</style></head>
<body leftmargin=0 topmargin=0>
About
</body></html>

Behavior is identical on device or simulator.

(Note, from here I learned the ratio is, perhaps 72.0/96.0.)

Check the font-size of the parent containers to the two About controls. I bet one of them already has a font-size set on it. If thats the case when you set the font-size for the About it takes the parents font-size into consideration. If I can see your HTML and CSS it might be more clear. — Lowkase, Jul 05 '16 at 12:53

score 20 · Accepted Answer · answered Jul 11 '16 at 20:15

If you want a 1 to 1 relationship between the font size that the UILabel uses and the font size that the UIWebView uses (via CSS) you have to use px instead of pt when defining the font size in your CSS.

Checkout this example HTML / CSS:

<html>
    <head>
        <style type='text/css'>
            body {
               font-family: 'SourceSansPro-Regular';
               padding: 0
            }
            .point {
                font-size: 17pt
            }
            .pixel {
                font-size: 17px
            }
        </style>
    </head>
    <body>
        <p class="point">About (17pt)<p>
        <p class="pixel">About (17px)</p>
    </body>
</html>

When you add a UIWebView and a UILabel to your UIViewController and load the above HTML to the UIWebView and set the same font to the UILabel:

override func viewDidLoad() {
    super.viewDidLoad()

    let webView = UIWebView(frame: CGRect(x: 25, y: 50, width:325 , height: 90))
    view.addSubview(webView)

    let filePath = NSBundle.mainBundle().URLForResource("test", withExtension: "html")
    webView.loadRequest(NSURLRequest(URL: filePath!))

    let label = UILabel(frame: CGRect(x: 25, y: 150, width: 325, height: 40))
    label.font = UIFont(name: "SourceSansPro-Regular", size: 17)
    label.text = "About (UILabel set to 17)"
    view.addSubview(label)
}

You get the following output:

This did not work with `WKWebView`. See [here](https://stackoverflow.com/questions/45998220/the-font-looks-like-smaller-in-wkwebview-than-in-uiwebview) for fix. — ntaj, Feb 14 '19 at 06:03

score 0 · Answer 2 · answered Aug 18 '17 at 19:42

I think your confusion was because CSS pt is a typographic point (1/72 in), but Apple's iOS documentation uses "point" (e.g. UIFont.pointSize) as "virtual pixel", which corresponds to CSS px. Judging from @joern's answer, it looks like UIWebView uses 1 css px = 1 ios virtual px. (I have not tested this.) However, in my tests with WKWebView, it looks like CSS px is equal to one device pixel. So for WKWebView, you want:

let fontSize = UIScreen.main.scale * label.font.pointSize
let cssStr = String(format:"font-size: %.1fpx;", fontSize)

score -3 · Answer 3 · edited Jul 08 '16 at 14:12

-3

Yep, its a parent font-size issue:

You should always set the font-size for body to 16px (one can set it higher if a larger base font is required, the standard is 16px).

Then, set font sizes using 16px as the base.

body {
    font-size: 16px;
}

h1 {
    font-size: 24px;
}

If you want both the body and the h1 font-sizes to be the same then simply set the body font-size and don't set the font-size of the h1 (it will inherit the body font-size all on its own... aka... cascading).

body {
    font-size: 16px;
}

h1 {

}

What you have done is set the body font-size to a value... then set the h1 font-size to that same value, the problem is that h1 inherits the font-size from body and then goes even bigger when you assign a font-size to h1.

Hope this makes sense and helps.

edited Jul 08 '16 at 14:12

Fattie

27,874
70
431
719

answered Jul 05 '16 at 13:13

Lowkase

5,631
2
30
48

yes, give it a try and let me know if that was the solution ;) – Lowkase Jul 05 '16 at 13:15
Are you using a normalize.css some where? Sounds like the H1 has a default setting of 40px set in a normalize or the like. Maybe you can set the h1 font-size at the source – Lowkase Jul 05 '16 at 13:40

Font sizes in UIWebView does NOT match iOS font size

3 Answers3

Linked