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

【问题标题】：How to embed the right url to custom font in HTML string如何将正确的 url 嵌入 HTML 字符串中的自定义字体
【发布时间】：2019-12-13 05:05:20
【问题描述】：

如何在我的 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('C:\\Users\\AA\\Desktop\\PrintingStatement\\PrintingStatement\\CSS\\majalla.ttf')

它工作正常。如何在生产环境中将我的网址转换为以前的网址。

我更新的 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();
        }

我的项目结构：

【问题讨论】：

您是否检查过浏览器的开发控制台以查看实际发出了什么请求以及响应是什么？在浏览器中按 F12。
@itsme86 运行时的 url C:\\Users\\AA\\Desktop\\PrintingStatement\\PrintingStatement\\bin\\Debug\\..\\..\\CSS\\majalla.ttf
如果字体路径与exe所在的目录无关，为什么要使用该文件夹来构建URL？您要捕获该路径的哪一部分？用户的主目录？
@itsme86 这是 Windows 窗体应用程序，所以我考虑为用户安装它时路径应该如何（生产环境）。
不清楚问题是什么。 html在哪里？ CSS在哪里？字体文件在哪里？

标签： c# html css winforms url

【解决方案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>

我假设您的项目输出目录中有 Contents 文件夹，其中包含 Image.jpeg 和 MyFont.ttf 文件。（如果您的项目中有它们，它们在您的项目中，要将它们复制到输出目录中到正确的文件夹结构中，只需在解决方案资源管理器中这些文件的属性窗口中，将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 内容中其他内容的相对地址，效果很好。

您找到了我在这篇文章中分享的一个实现：Set URL of custom HTML loaded in webbrowser，并可以像这样轻松使用它：

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

【讨论】：