如何在 HTML 字符串中将正确的 url 嵌入到自定义字体中

Question

如何在我的 HTML 字符串中嵌入正确的 url 到自定义字体。

我执行以下操作：

   string exeFile = (new System.Uri(Assembly.GetEntryAssembly().CodeBase)).AbsolutePath;
   string path4 = Path.Combine(Regex.Escape(exeDir), "\\..\\\\..\\\\CSS\\\\majalla.ttf");
   string arabicFont = @"@font-face {
                      font-family: 'sakkal_majallaregular';
                      src: url(" + "'" + path4 + "'" + @"), url('majalla-webfont.woff2') format('woff2'), url('majalla-webfont.woff') format('woff');}";

这不起作用（不生效）。 调试后path4 =

C:\\\\Users\\\\AA\\\\Desktop\\\\PrintingStatement\\\\PrintingStatement\\\\bin\\\\Debug\\\\..\\\\..\\\\CSS\\\\majalla.ttf

当我尝试这样的常量绝对 url 时：

url('C:\\Users\\AA\\Desktop\\PrintingStatement\\PrintingStatement\\CSS\\majalla.ttf')

它工作正常。 如何在生产环境中将我的 url 转换为上一个。

我更新的 HTML 方法

   protected string StyleStatementDoc(SingleStatement statementToPrint)
        {
            string path1 = "CSS/StatementVerifacation.css";
            string path2 = "CSS/Statement.css";
            string path3 = "CSS/print.min.css";
            string path4 = "CSS/majalla.ttf"; 

            string arabicFont = @"@font-face {
                                            font-family: 'sakkal_majallaregular';
                                            src: url(" + "'" + path4 + "'" + @"), url('majalla-webfont.woff2') format('woff2'), url('majalla-webfont.woff') format('woff');
                                           }";
            string htmlData = @"<!DOCTYPE html>
                                <html>
                                <head>
                                    <title>Statement</title>
                                     <style>" + arabicFont + @"


                                            body {
                                            font-size: 20px;
                                            background-color: White;
                                            color: Black;
                                            font-family:'sakkal_majallaregular', Arial, Helvetica, sans-serif;
                                            text-align:right;
                                            direction:rtl;

                                             }
                                           p {
                                              line-height: 32px;   /* within paragraph */
                                              margin-bottom: 30px; /* between paragraphs */
                                              }
                                    </style>
                                    <link href = '" + path1 + "'" + " rel='stylesheet' />" + @"

                                   <link href = '" + path3 + "'" + " rel='stylesheet' />" + @"

                                        </head>
                                <body>
                                    <div class='my' id='editor1'>" + statementToPrint.StatementBeforePrint + @"

                                    </div>
                                </body>
                                </html>
                                ";

           // htmlData = htmlData.Replace(@"<head>", $@"<head><base href=""{new Uri(Application.StartupPath)}/""/>");
            return htmlData;
        }
       System.Windows.Forms.WebBrowser webBrowser = new System.Windows.Forms.WebBrowser();
        protected void Print(string htmlData)
        {

            webBrowser.SetHtmlContent(htmlData, $@"{new Uri(Application.StartupPath)}/");

            webBrowser.Print();
        }

我的项目结构：

Answer 1

要解析相对地址，您有以下选项：

在 html 中使用占位符并将其替换为 bin 文件夹地址。 （适用于除字体外的所有内容）
在头部注入<base>标签。 （适用于除字体外的所有内容）
实现IMoniker以设置文档的基本 URL。 （适用于所有字体以及字体）我已经为WebBrowser1.SetHtmlContent(html, url)实现了一个扩展方法

例子

假设你有一个这样的 html：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Sample</title>
    <style>
        @font-face {
            font-family: "MyFont";
            src: url('./Contents/MyFont.ttf') format('truetype');
        }

        body {
            background-image: url('./Contents/Image.jpeg');
            font-family: 'MyFont';
            font-weight: normal;
            font-style: normal;
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    Something
</body>
</html>

我假设您的项目输出目录中有包含Image.jpeg和MyFont.ttf文件的Contents文件夹。 （如果你的项目中有它们，它们在你的项目中，将它们复制到输出目录到正确的文件夹结构中，只需在解决方案资源管理器中这些文件的属性窗口中，将Copy to output directory设置为Copy Always 。）

解决方案 1 - 在 HTML 文件中使用占位符并将其替换为 bin 路径

所以代替./使用$ROOT$/ ，例如： background-image:url('$ROOT$/Resources/Sample.jpeg'); 然后在设置浏览器的文档文本时，将其替换为应用程序的启动路径：

this.webBrowser1.DocumentText = yourHtmlContent.Replace("$ROOT$", 
    new Uri(Application.StartupPath).ToString());

解决方案 2 - 注入 html <base>标签

假设您在 html 内容中没有任何占位符。 然后像这样将<base>标记注入<head>就足够了：

var html = System.IO.File.ReadAllText("HTMLPage1.html");
html = html.Replace(@"<head>", $@"<head><base href=""{new Uri(Application.StartupPath)}/""/>");
webBrowser1.DocumentText = html;

这意味着将使用<base> href 属性解析所有相对地址。

解决方案 3 - 实施IMoniker

您可以实现IMoniker接口并使用来自SHDocVw IWebBrowser2加载 html 内容并为其设置基本 url。 我将此方法用于@font-face相对地址以及 html 内容中其他内容的相对地址，并且效果很好。

您会找到我在这篇文章中分享的实现：设置 webbrowser 中加载的自定义 HTML 的 URL，并像这样轻松使用它：

webBrowser1.SetHtmlContent(html, 
    $@"{new Uri(Application.StartupPath)}/");

如何在 HTML 字符串中将正确的 url 嵌入到自定义字体中

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-05 19:34:32

如何在 HTML 字符串中将正确的 url 嵌入到自定义字体中

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-05 19:34:32

解决方案1
1 已采纳 2019-08-05 19:34:32