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