Azure 上的 Bootstrap Glyphicons 不同的字体样式

Posted 2023-03-15

【中文标题】Azure 上的 Bootstrap Glyphicons 不同的字体样式

【英文标题】：Different font styling with Bootstrap Glyphicons on Azure

【发布时间】：2016-08-30 13:46:01

【问题描述】：

我使用从 Nuget 安装的 ASP .NET MVC 5、Bootstrap 3.3.6 和 Glyphicons 创建了 Web 应用程序。我对导航链接的字体样式有疑问，只有那些添加了 Glyphicons 的。 Azure 上出现问题。为了清楚起见，显示了 Glyphicons。在 azure 上它们更大，以下名称也使用不同的字体，这是不正确的。有什么想法吗？

我在 localhost 上的样式也有同样的问题，但我使用下面的代码修复了它。添加了 .glyphicon:before 部分并从“Glyphicons Halflings”更改为 .glyphicon font-family:inherit ;。

bootstrap.css

@font-face 
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
  url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
  url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

.glyphicon 
  position:  relative;
  top: 0px;
  display: inline-block;
  font-family: inherit;
  font-size: inherit;
  font-style:  normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

.glyphicon:before
  font-family: 'Glyphicons Halflings' !important;
  font-size: x-small;

我不知道为什么它不能在 Azure 上运行。

我的其余代码：

_Layout.cshtml

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/jqueryui")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryui")

<div class="navbar-header">
    <a class="navbar-brand" style="padding-top:14px;font-family:Arial, Helvetica, sans-serif" href="/Home/Index">
        <span class="glyphicon glyphicon-home" style="font-size:14px"> Home Page</span></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li>@Html.ActionLink(" Offers", "All", "Offers", null, new  @class = "glyphicon glyphicon-road " )</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>                   
    </ul>
</div>

BundleConfig.cs

    public static void RegisterBundles(BundleCollection bundles)
    
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-version.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-version.js"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                  "~/Scripts/jquery-ui-version.js"));

        bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
                  "~/Content/themes/base/all.css",
                  "~/Content/themes/base/base.css",
                  "~/Content/themes/base/theme.css"));
    

Web.config

</system.webServer>
  <staticContent>
    <remove fileExtension=".eot" />
    <remove fileExtension=".ttf" />
    <remove fileExtension=".svg" />
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
    <mimeMap fileExtension="woff" mimeType="application/font-woff" />
    <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
  </staticContent>
</system.webServer>

这是在 IE 中检查时“优惠”导航链接的外观：

1. on Azure

2. on localhost

Glyphicons 位于 ma​​infolder/fonts/glyphicons-halflings-regular.(eot,svg,ttf,woff,woff2)

所有引导 css' 都位于 ma​​infolder/Content/bootstrap*.(css,map)

【问题讨论】：

你也有bootstrap.min.css吗？如果你在 web.config 中设置<compilation debug="false"> 问题会在本地发生吗？

两张截图中有less 文件和css 文件？

@Paul Abbott - 是的，我有 bootstrap.min.css 并且当我设置 时问题存在在我的本地主机上。当它设置为“true”时，样式就可以了。

@EdSF - 在第二个屏幕截图中，当在本地主机上呈现“优惠”导航链接时应用了另外一个规则 .glyphicon:before。感谢我添加到 bootstrap.css 中的这段代码，样式没问题。 Azure 上似乎缺少这部分。

【参考方案1】：

你的问题是捆绑。

当您在本地以调试模式运行时，.css 文件将单独发送到浏览器。未处于调试模式时（部署时），.min.css 文件将捆绑到一个文件中并发送。如果没有 .min.css 文件，它会即时缩小。

换句话说，您的更改不在bootstrap.min.css 中，因此您的更改不会出现在已部署的应用程序中。缩小bootstrap.css（有很多在线工具）并替换bootstrap.min.css的内容。或者更好的是不要单独使用引导程序文件（因此将引导程序升级到新版本不会很困难）并在一个单独的 css 文件中覆盖您需要的任何内容，该文件最后在捆绑包中加载。