WebEngineView：htmlコンテンツにカスタムフォントを設定

Question

WebEngineViewのhtmlコンテンツの一部にカスタムフォント（qrcのフォントがあります）を適用するにはどうすればよいですか？

Answer 1

私は（私はこれがどのように安全ではわからない）私のカスタムフォントを使用する方法を考え出し：

1. QRCにカスタムフォントを追加します。://res/font/myfont.ttf。

2. このコンテンツをQRCにstyle.cssを作成します。

   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;" 
         ); 
        }     
       } 
   } 
   

3. そして最後には、このコマンドを使用してアプリケーションを実行します。コンテンツは、あなたのstyle.css HTMLに追加WebEngineViewにロードQMLで

   @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; 
   } 
   

4. 行引数--disable-web-security