Question

我在Web控件库中嵌入多个字体文件时遇到问题。我在这里问到的所有问题都是针对驻留在客户端应用程序中的字体。

我正在开发一个用于工作的小型Web控件库，它在客户端Web项目中被引用为DLL。在我的DLL中，我将font-awesome.css注册为WebResource

<Assembly: WebResource(ResourceRegistrar.FONTAWESOME_STYLE_RESOURCE, "text/css")> 

Public Class ResourceRegistrar

    Public Const FONTAWESOME_STYLE_RESOURCE As String = "MyCompany.Web.font-awesome.css"

    Public Shared Sub RegisterFontAwesome(control As Control)
        Dim cs As ClientScriptManager = control.Page.ClientScript

        Dim stylesheetResourceBlock As String = "<link href='" + cs.GetWebResourceUrl(GetType(ResourceRegistrar), FONTAWESOME_STYLE_RESOURCE) + "' type='text/css' rel='stylesheet' />"

        cs.RegisterClientScriptBlock(GetType(ResourceRegistrar), FONTAWESOME_STYLE_RESOURCE, stylesheetResourceBlock, False)
    End Sub

End Class

FontAwesome得到了很好的加载但是在css中它定义了一个font-face，它引用了DLL中打包的字体以及font-awesome.css

/*!
 *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('/Styles/Shared/font-awesome/fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('/Styles/Shared/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), 
       url('/Styles/Shared/font-awesome/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'),
       url('/Styles/Shared/font-awesome/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), 
       url('/Styles/Shared/font-awesome/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

当css被加载到客户端应用程序页面上时，它希望根据客户端应用程序的文件夹结构加载这些字体，而不是DLL。当浏览器尝试加载这些字体时，结果是404错误。

如何在Web控制库中打包引用这些字体的字体和css文件？

Answer 1

解决方案是在程序集声明中包含PerformSubstitution属性并将其设置为true。然后在引用该字体的css文件中，我使用代码块来包含正确的URL。

@font-face {
  font-family: 'FontAwesome';
  src: url('<%=WebResource("MyCompany.Web.fontawesome-webfont.woff")%>')    format('woff');
  src: url('<%=WebResource("MyCompany.Web.fontawesome-webfont.otf")%>') format('embedded-opentype'), 
       url('<%=WebResource("MyCompany.Web.fontawesome-webfont.ttf")%>') format('truetype');
  font-weight: normal;
  font-style: normal;

}

将@ font-face与Web控件库中嵌入的字体一起使用

1 个答案: