WebView 组件忽略自定义字体答案

【问题标题】：WebView component ignores custom fontsWebView 组件忽略自定义字体
【发布时间】：2018-12-28 18:42:10
【问题描述】：

PyQt5 有一个名为 WebView（不是 QWebView！）的组件，它可以使用其 loadHtml 方法加载 html。如果传递给该方法的字符串包含对外部字体的引用，则该字体将被忽略。

在qml文件中加载html：

mainWebView.loadHtml(article); // mainWebView is the id of a WebView component

在py文件中准备html字符串：

with open(CSS_PATH, 'r') as f:
    css_style = f.read()

article = "<html><head><style>%s</style><title>%s</title></head><body>%s</body></html>" % (css_style, article['title'], article['body'])

在css文件中获取和设置外部字体：

@font-face {
  font-family: "AvenirNext";
  src: url("AvenirNext-Regular.ttf") format("truetype");
}

html *
{
   color: #e6e6e6;
   font-family: "AvenirNext";
   background-color: #494845;
   margin-left: 14px;
}

如果我在 CSS 中使用 font-family: "Courier New"，字体可以正常工作。只有当我从文件夹中获取一些字体时，它才会被忽略。我将 ttf 文件放在应用程序根文件夹和 css 文件所在的文件夹中，以防万一。链接到组件： https://doc.qt.io/qt-5.11/qml-qtwebview-webview.html

【问题讨论】：

标签： python css pyqt qml pyqt5

【解决方案1】：

根据docs：

void loadHtml(string html, url baseUrl)

将指定的 html 内容加载到 web 视图中。

此方法提供了 url 属性的较低级别替代方案，通过 URL 引用 HTML 页面。

HTML 中引用的样式表或图像等外部对象文档应该相对于 baseUrl。例如，如果 html 从http://www.example.com/documents/overview.html 检索，这是基本 URL，然后是使用相对 url 引用的图像， diagram.png，应该是http://www.example.com/documents/diagram.png

.css、.js 或任何外部元素将与 baseUrl 相关，这是setHtml() 的第二个参数。因此，解决方案是将其传递给它应该在本地文件夹中的虚构文件的 url。

main.py

import os
import sys
from PyQt5 import QtCore, QtGui, QtQml

if __name__ == '__main__':
    app = QtGui.QGuiApplication(sys.argv)
    engine = QtQml.QQmlApplicationEngine()
    dir_path = os.path.dirname(os.path.abspath(__file__))
    CSS_PATH = "styles.css"
    with open(os.path.join(dir_path, CSS_PATH), 'r') as f:
        css_style = f.read()
        article = {"title": "title1", "body": "<H1> Body"}
        article = "<html><head><style>%s</style><title>%s</title></head><body>%s</body></html>" % (css_style, article['title'], article['body'])
        baseUrl = QtCore.QUrl.fromLocalFile(os.path.join(dir_path, 'index.html'))
        engine.rootContext().setContextProperty("article", article)
        engine.rootContext().setContextProperty("baseUrl", baseUrl)
    qml_filename = os.path.join(dir_path, 'main.qml')
    engine.load(QtCore.QUrl.fromLocalFile(qml_filename))
    if not engine.rootObjects():
        sys.exit(-1)
    sys.exit(app.exec_())

main.qml

import QtQuick 2.5
import QtQuick.Window 2.2
import QtWebView 1.1

Window {
    visible: true
    width: 640
    height: 480
    WebView{
        id: mainWebView
        anchors.fill: parent
    }
    Component.onCompleted: mainWebView.loadHtml(article, baseUrl)
}

我假设该项目具有以下结构：

|-- AvenirNext-Regular.ttf
|-- main.py
|-- main.qml
`-- styles.css

【讨论】：