UIWebView 中的字体大小与 iOS 字体大小不匹配答案

【问题标题】：Font sizes in UIWebView does NOT match iOS font sizeUIWebView 中的字体大小与 iOS 字体大小不匹配
【发布时间】：2016-11-07 06:39:34
【问题描述】：

这是一个 UILabel，上面写着“关于”。在 iOS 中设置为 17.7。

在它下面是一个 UIWebView，它也写着“关于”。也使用 css 设置为 17.7。

它们不匹配。

如何正确解决这个问题？

奇怪的是，在苹果自己的 UIWebView 中，大小基础不同？

要测试的 HTML...

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

在设备或模拟器上的行为是相同的。

（注意，我从here了解到这个比率是，可能是 72.0/96.0。）

【问题讨论】：

检查两个关于控件的父容器的字体大小。我敢打赌其中一个已经设置了字体大小。如果是这种情况，当您为 About 设置字体大小时，它会考虑父母的字体大小。如果我能看到你的 HTML 和 CSS，它可能会更清楚。

标签： ios css uiwebview retina-display

【解决方案1】：

我认为您的困惑是因为 CSS pt 是一个印刷点（1/72 英寸），但 Apple 的 iOS 文档使用“点”（例如 UIFont.pointSize）作为“虚拟像素”，它对应于 CSS px。从@joern 的回答来看，看起来 UIWebView 使用 1 css px = 1 ios virtual px。（我没有对此进行测试。）但是，在我使用 WKWebView 进行的测试中，CSS px 看起来等于一个设备像素。所以对于 WKWebView，你想要：

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

【讨论】：

【解决方案2】：

如果您希望UILabel 使用的字体大小与UIWebView 使用的字体大小（通过 CSS）之间存在一对一的关系，则在定义CSS 中的字体大小。

查看此示例 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>

当您将UIWebView 和UILabel 添加到UIViewController 并将上述HTML 加载到UIWebView 并将相同的字体设置为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)
}

你得到以下输出：

【讨论】：

天哪！就是这么简单！！
非常感谢@joerm，发送了一个赏金
这不适用于WKWebView。请参阅here 进行修复。

【解决方案3】：

是的，这是一个父字体大小问题：

您应该始终将 body 的 font-size 设置为 16px（如果需要更大的基本字体，可以将其设置得更高，标准为 16px）。

然后，以 16px 为基准设置字体大小。

body {
    font-size: 16px;
}

h1 {
    font-size: 24px;
}

如果您希望 body 和 h1 字体大小相同，则只需设置 body 字体大小而不设置 h1 的字体大小（它将全部继承 body 字体大小它自己的...又名...级联）。

body {
    font-size: 16px;
}

h1 {

}

你所做的是将 body 字体大小设置为一个值......然后将 h1 字体大小设置为相同的值，问题是 h1 从 body 继承了字体大小，然后在您将字体大小分配给 h1。

希望这有意义并有所帮助。

【讨论】：

是的，试一试，让我知道这是否是解决方案；）
你在哪里使用 normalize.css 吗？听起来像 H1 在标准化等中设置了 40px 的默认设置。也许您可以在源代码处设置 h1 字体大小