Font sizes in UIWebView does NOT match iOS font size

问题

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.)

回答1:

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:

回答2:

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)

回答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.

来源：https://stackoverflow.com/questions/38203209/font-sizes-in-uiwebview-does-not-match-ios-font-size

标签

ios

css

uiwebview

retina-display