使用@font face 时在 QtWebEngine 中忽略 Google 字体 (ttf)-前端问题

Google Fonts (ttf) being ignored in QtWebEngine when using @font face(使用@font face 时在 QtWebEngine 中忽略 Google 字体 (ttf))

本文介绍了使用@font face 时在 QtWebEngine 中忽略 Google 字体 (ttf)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将谷歌字体加载到我的 pyqt5 QtWebEngine 应用程序中.

应用程序加载一个带有 css 样式的本地 html 文件.我使用字体加载ttf文件如下:

@font-face {font-family: "Work Sans";src: url("C:UsersGodwinTIATfontsWorkSans-Regular.ttf") 格式('truetype');}身体 {font-family: "Work Sans";背景颜色:#eef0f2；}

加载 html 文件时似乎忽略了字体.

有人可以帮忙吗.

编辑强文本

这是我的完整html

@font-face {字体系列:Work Sans；src: url("Work_Sans/WorkSans-Regular.ttf")}分区 {字体系列:Work Sans；}

<!DOCTYPE html><html lang="zh"><头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" type="text/css" href="style.css"/><title>文档</title></头><风格></风格><身体>你好世界</div></身体></html>

这些适用于 chrome、firefox 和 chrome，但如果我像这样使用 qtwebengine

从 PyQt5 导入 QtCore、QtGui、QtWidgets、QtWebEngineWidgets如果 __name__ == "__main__":导入系统sys.argv.append("--disable-web-security")应用程序 = QtWidgets.QApplication(sys.argv)wnd = QtWidgets.QWidget()genVLayout = QtWidgets.QVBoxLayout(wnd)verticalLayout_7 = QtWidgets.QVBoxLayout()webEngineViewGen = QtWebEngineWidgets.QWebEngineView(wnd)webEngineViewGen.setUrl(QtCore.QUrl(关于:空白"))fh = open('main.html','r')html = fh.read()webEngineViewGen.setHtml(html)verticalLayout_7.addWidget(webEngineViewGen)genVLayout.addLayout(verticalLayout_7)wnd.show()sys.exit(app.exec_())

它的字体不起作用

解决方案

如果您使用的是 setHtml() 则如 docs 外部资源将相对于您作为第二个参数传递的 url:

<块引用>

void QWebEngineView::setHtml(const QString &html, const QUrl &baseUrl = QUrl())

[...]

HTML 文档中引用的样式表或图像等外部对象相对于 baseUrl 定位.

[...]

所以在你的情况下，解决方案是:

导入操作系统从 PyQt5 导入 QtCore、QtGui、QtWidgets、QtWebEngineWidgets如果 __name__ == __main__":导入系统sys.argv.append("--disable-web-security")应用程序 = QtWidgets.QApplication(sys.argv)wnd = QtWidgets.QWidget()genVLayout = QtWidgets.QVBoxLayout(wnd)verticalLayout_7 = QtWidgets.QVBoxLayout()webEngineViewGen = QtWebEngineWidgets.QWebEngineView(wnd)webEngineViewGen.setUrl(QtCore.QUrl("about:blank"))使用 open('main.html','r') 作为 fh:html = fh.read()current_dir = os.path.dirname(os.path.abspath(__file__))url = QtCore.QUrl.fromLocalFile(os.path.join(current_dir, "main.html"))webEngineViewGen.setHtml(html, url)verticalLayout_7.addWidget(webEngineViewGen)genVLayout.addLayout(verticalLayout_7)wnd.show()sys.exit(app.exec_())

或者干脆使用 load() 方法:

导入操作系统从 PyQt5 导入 QtCore、QtGui、QtWidgets、QtWebEngineWidgets如果 __name__ == __main__":导入系统sys.argv.append("--disable-web-security")应用程序 = QtWidgets.QApplication(sys.argv)wnd = QtWidgets.QWidget()genVLayout = QtWidgets.QVBoxLayout(wnd)verticalLayout_7 = QtWidgets.QVBoxLayout()webEngineViewGen = QtWebEngineWidgets.QWebEngineView(wnd)webEngineViewGen.setUrl(QtCore.QUrl("about:blank"))current_dir = os.path.dirname(os.path.abspath(__file__))url = QtCore.QUrl.fromLocalFile(os.path.join(current_dir, "main.html"))webEngineViewGen.load(url)verticalLayout_7.addWidget(webEngineViewGen)genVLayout.addLayout(verticalLayout_7)wnd.show()sys.exit(app.exec_())

I am trying to load a google font to my pyqt5 QtWebEngine app.

The app loads a local html file with css stying. I used font face to load the ttf file as below:

@font-face {
	font-family: "Work Sans";
	src: url("C:UsersGodwinTIATfontsWorkSans-Regular.ttf") format('truetype');
}

body {
	font-family: "Work Sans";
	background-color: #eef0f2;
}

the font seem to be ignored when loading the html file.

Can someone please assist.

Editstrong text

Here is my full html

@font-face {
    font-family: Work Sans;
    src: url("Work_Sans/WorkSans-Regular.ttf")
}

div {
    font-family: Work Sans;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Document</title>
</head>
<style>
</style>
<body>
    <div>
        Hello World
    </div>
</body>
</html>

These works on chrome, firefox and chrome but if i use qtwebengine like this

from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets

if __name__ == "__main__":

    import sys
    sys.argv.append("--disable-web-security")
    app = QtWidgets.QApplication(sys.argv)
    wnd = QtWidgets.QWidget()
    genVLayout = QtWidgets.QVBoxLayout(wnd)
    verticalLayout_7 = QtWidgets.QVBoxLayout()
    webEngineViewGen = QtWebEngineWidgets.QWebEngineView(wnd)
    webEngineViewGen.setUrl(QtCore.QUrl("about:blank"))
    fh = open('main.html','r')
    html = fh.read()
    webEngineViewGen.setHtml(html)

    verticalLayout_7.addWidget(webEngineViewGen)
    genVLayout.addLayout(verticalLayout_7)
    wnd.show()
    sys.exit(app.exec_())

it font does not work

解决方案

If you are using setHtml() then as indicated by the docs the external resources will be relative to the url that you pass as second parameters:

void QWebEngineView::setHtml(const QString &html, const QUrl &baseUrl = QUrl())

[...]

External objects, such as stylesheets or images referenced in the HTML document, are located relative to baseUrl.

[...]

So in your case the solution is:

import os
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets

if __name__ == "__main__":
    import sys
    sys.argv.append("--disable-web-security")
    app = QtWidgets.QApplication(sys.argv)
    wnd = QtWidgets.QWidget()
    genVLayout = QtWidgets.QVBoxLayout(wnd)
    verticalLayout_7 = QtWidgets.QVBoxLayout()
    webEngineViewGen = QtWebEngineWidgets.QWebEngineView(wnd)
    webEngineViewGen.setUrl(QtCore.QUrl("about:blank"))
    with open('main.html','r') as fh:
        html = fh.read()
        current_dir = os.path.dirname(os.path.abspath(__file__))
        url = QtCore.QUrl.fromLocalFile(os.path.join(current_dir, "main.html"))
        webEngineViewGen.setHtml(html, url)
    verticalLayout_7.addWidget(webEngineViewGen)
    genVLayout.addLayout(verticalLayout_7)
    wnd.show()
    sys.exit(app.exec_())

Or simply use the load() method:

import os
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets

if __name__ == "__main__":
    import sys
    sys.argv.append("--disable-web-security")
    app = QtWidgets.QApplication(sys.argv)
    wnd = QtWidgets.QWidget()
    genVLayout = QtWidgets.QVBoxLayout(wnd)
    verticalLayout_7 = QtWidgets.QVBoxLayout()
    webEngineViewGen = QtWebEngineWidgets.QWebEngineView(wnd)
    webEngineViewGen.setUrl(QtCore.QUrl("about:blank"))
    current_dir = os.path.dirname(os.path.abspath(__file__))
    url = QtCore.QUrl.fromLocalFile(os.path.join(current_dir, "main.html"))
    webEngineViewGen.load(url)
    verticalLayout_7.addWidget(webEngineViewGen)
    genVLayout.addLayout(verticalLayout_7)
    wnd.show()
    sys.exit(app.exec_())

这篇关于使用@font face 时在 QtWebEngine 中忽略 Google 字体 (ttf)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！