WebEngineView：将自定义字体设置为html内容

Question

如何将自定义字体（字体在qrc中）应用于WebEngineView中html内容的某些部分？

Answer 1

我想出了如何使用我的自定义字体（但我不确定这有多安全）：

1. 将自定义字体添加到qrc：://res/font/myfont.ttf;

2. 使用以下内容在qrc中创建style.css：

   @font-face {
     font-family: myfont;
     src: url('qrc:/res/font/myfont.ttf');
     font-weight: bold;
   }
   
   body {
       font-family: 'myfont';
       text-align: justify;
       line-height: 25px;
   }
   

3. 在QML中，加载到WebEngineView的内容会将您的style.css添加到HTML：

   WebEngineView {
       id: webEngineView
       onLoadingChanged: {
           if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
           webEngineView.runJavaScript(
               "var headHTML = document.documentElement.getElementsByTagName('head')[0].innerHTML;" +
               "headHTML += '<link rel=\"stylesheet\" href=\"qrc:/css/styles.css\">';" + 
               "document.documentElement.getElementsByTagName('head')[0].innerHTML = headHTML;"
               );
           }                
       }
   }
   

4. 最后，使用此命令行参数运行您的应用--disable-web-security