QLabel font differs when inserting a short HTML text
<p>I have noticed that the font size of a <code>QLabel()</code> in a PyQt GUI is not very consistent. Let's take a look at the following example. I've written a complete python file for a quick test. It will pop up a Qt window with two labels:</p>

<pre><code>from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
import sys
import os

'''---------------------------------------------------------------------'''
'''                                                                     '''
'''                        T E S T I N G                                '''
'''                                                                     '''
'''---------------------------------------------------------------------'''


class TestWindow(QMainWindow):
    def __init__(self):
        super(TestWindow, self).__init__()

        # 1. Set basic geometry and color.
        # --------------------------------
        self.setGeometry(100, 100, 800, 600)
        self.setWindowTitle('Hello World')
        palette = QPalette()
        palette.setColor(QPalette.Window, QColor(200,200,200))
        self.setPalette(palette)
        self.show()

        # 2. Create the central frame.
        # ----------------------------
        self.centralFrame = QFrame(self)
        self.centralFrame.setFrameShape(QFrame.NoFrame)
        self.centralLayout = QVBoxLayout()
        self.centralFrame.setLayout(self.centralLayout)
        self.centralLayout.setSpacing(5)
        self.centralLayout.setContentsMargins(20,20,20,20)
        self.setCentralWidget(self.centralFrame)

        # 3. Do the test.
        # ----------------
        # TEST CASE 1
        # The label with html
        self.infoLbl = QLabel()
        self.infoLbl.setTextFormat(Qt.RichText)
        self.infoLbl.setFrameShape(QFrame.StyledPanel)
        self.infoTxt = \
'&lt;html&gt; \
&lt;head&gt; \
&lt;/head&gt; \
&lt;body&gt; \
&lt;font size="10"&gt; \
&lt;p style="margin-left:8px;"&gt;My html text, font = 10pt&lt;/p&gt; \
&lt;/font&gt; \
&lt;/body&gt; \
&lt;/html&gt; '
        self.infoLbl.setText(self.infoTxt)
        self.infoLbl.setMaximumHeight(50)
        self.infoLbl.setMaximumWidth(500)

        # TEST CASE 2
        # The label with a normal string
        self.normalLbl = QLabel()
        self.normalLbl.setFrameShape(QFrame.StyledPanel)
        self.normalLbl.setText('My normal text, font = 10pt')
        font = QFont()
        font.setFamily("Arial")
        font.setPointSize(10)
        self.normalLbl.setFont(font)
        self.normalLbl.setMaximumHeight(50)
        self.normalLbl.setMaximumWidth(500)

        # 4. Add both labels to the central layout.
        # ------------------------------------------
        self.centralLayout.addWidget(self.infoLbl)    # &lt;- The label with html snippet
        self.centralLayout.addWidget(self.normalLbl)  # &lt;- The normal label
        self.centralLayout.addWidget(QLabel())        # &lt;- Just a spacer


if __name__== '__main__':
    app = QApplication(sys.argv)
    QApplication.setStyle(QStyleFactory.create('Fusion'))
    testWindow = TestWindow()
    app.exec_()
    app = None
</code></pre>

<p>If you run this code, this is what you get:</p>

<p><a href="http://i.stack.imgur.com/mjSbX.png" rel="nofollow"><img src="http://i.stack.imgur.com/mjSbX.png" alt="Font size issue in QLabel"></a></p>

<p>Why are the font sizes in both labels not equal?</p>

<p>For completeness, this is my system:</p>

<ul>
<li>Operating system: Windows 10, 64-bit</li>
<li>Python version: v3 (anaconda package)</li>
<li>Qt version: PyQt5</li>
</ul>

<p>The <code>font</code> tag is still fully supported in both Qt4 and Qt5. The fact that it has been made obsolete by the current HTML standard is irrelevant, because Qt has only ever supported <a href="http://doc.qt.io/qt-5/richtext-html-subset.html" rel="nofollow">a limited subset of HTML4</a>.</p>

<p>The real problem with the example is due to a misunderstanding of the <code>size</code> attribute. This does not specify a <em>point</em> size. Rather, it specifies either, (a) a fixed value in the range 1-7, or (b) a plus/minus value relative to the <code>basefont</code> size. So all it can ever do is make the font "smaller" or "larger", and the exact results will depend entirely on the rendering engine.</p>

<p>To set an <em>exact</em> point-size, use the css <code>font-size</code> property:</p>

<pre><code>&lt;p style="font-size:10pt"&gt;My html text, font = 10pt&lt;/p&gt;
</code></pre>

<hr>

<p>NB: see the <a href="http://doc.qt.io/qt-5/richtext-html-subset.html#css-properties" rel="nofollow">CSS Properties Table</a> for a list of all the css properties supported by Qt's rich-text engine.</p>

python html qt pyqt pyqt5