Font sizes in UIWebView does NOT match iOS font size

前端未结

关注

 3  526

北恋

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.

相关标签:

3条回答

挽巷

2021-01-11 13:02
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)
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
时光说笑

2021-01-11 13:02
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

[愿得一人]

2021-01-11 13:05

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:

0 讨论(0)