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

【问题标题】：Using @font-face with a font embedded in Web Control Library将 @font-face 与嵌入在 Web 控件库中的字体一起使用
【发布时间】：2014-09-04 17:52:52
【问题描述】：

在 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 get 加载到客户端应用程序的页面上时，它期望根据客户端应用程序的文件夹结构而不是 DLL 加载这些字体。结果是浏览器在尝试加载这些字体时出现 404 错误。

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

【问题讨论】：

标签： css asp.net .net vb.net fonts

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

}

【讨论】：