2

我可能在这里遗漏了一些东西,但我觉得我已经按照 FontAwesome 的说明做了所有可能的事情,但我根本无法让那种漂亮流畅的字体正常工作。我的字体不太流畅,我什至不认为它设置为 FontAwesome。

这是一张显示我在 Firefox 中的问题的图片。在 IE9 中也是如此。 FontAwesome 问题

我正在使用 ASP.NET MVC 4 和 Bootstrap (less) 和 FontAwesome (less) 和 BundleTransformer。这是我的 BundleConfig 类:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        var cssTransformer = new CssTransformer();
        var jsTransformer = new JsTransformer();
        var nullOrderer = new NullOrderer();

        var modernizrBundle = new Bundle("~/bundles/modernizr")
            .Include("~/Scripts/modernizr-*");
        modernizrBundle.Transforms.Add(jsTransformer);
        modernizrBundle.Orderer = nullOrderer;

        var jsBundle = new Bundle("~/bundles/js")
            .Include("~/Scripts/jquery-{version}.min.js")
            .Include("~/Scripts/bootstrap.js");
        jsBundle.Transforms.Add(jsTransformer);
        jsBundle.Orderer = nullOrderer;

        var cssBundle = new Bundle("~/bundles/css")
            .Include("~/Content/less/bootstrap.less")
            .Include("~/Content/less/responsive.less");
        cssBundle.Transforms.Add(cssTransformer);
        cssBundle.Orderer = nullOrderer;

        bundles.Add(modernizrBundle);
        bundles.Add(jsBundle);
        bundles.Add(cssBundle);

        BundleTable.EnableOptimizations = true;
    }
}

我编辑了 bootstrap.less 文件以包含@import "font-awesome.less";而不是@import "sprites.less";,并且我更正了 font-awesome.less ( @FontAwesomePath: "../font";) 中 FontAwesome 字体目录的路径。

我的页面生成的源代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="/bundles/css?v=PzV9CBTBs7_DCIpcfH8cCcOoepY8EiM_IKgyY6a02Mw1" rel="stylesheet"/>
    <script src="/bundles/modernizr?v=N72c_KKpFDVtSEIZ3CtjgoN7eDH9Wa28lL9Ncn1mtUw1"></script>
</head>
<body>
    <div>
        <p>
          <a class="btn btn-success" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a>
        </p>

        <script src="/bundles/js?v=7PBTQq6BUbxyT95hBnk4xN3Qb852Tl2pCmQoTS6PuLs1"></script>        
    </div>
</body>
</html>

我已经验证生成的 css 中的字体路径指向正确的 FontAwesome 字体文件并且它们在那里。Firefox 在加载页面时会确认这一点:

[12:24:45.372] GET http://localhost:57700/ [HTTP/1.1 200 OK 1040ms]
[12:24:46.457] GET http://localhost:57700/bundles/css?v=PzV9CBTBs7_DCIpcfH8cCcOoepY8EiM_IKgyY6a02Mw1 [HTTP/1.1 200 OK 7ms]
[12:24:46.458] GET http://localhost:57700/bundles/modernizr?v=N72c_KKpFDVtSEIZ3CtjgoN7eDH9Wa28lL9Ncn1mtUw1 [HTTP/1.1 200 OK 5ms]
[12:24:46.459] GET http://localhost:57700/bundles/js?v=7PBTQq6BUbxyT95hBnk4xN3Qb852Tl2pCmQoTS6PuLs1 [HTTP/1.1 200 OK 12ms]
[12:24:47.695] GET http://localhost:57700/Content/font/fontawesome-webfont.woff?v=3.0.1 [HTTP/1.1 200 OK 2ms]

我尝试将链接的字体系列设置为 FontAwesome,但随后字体完全关闭。

我在这里想念什么?

4

1 回答 1

2

Fontawesome 仅适用于图标,而不适用于文本。因此,在您的示例中,只有购物车是由 FontAwesome 字体生成的,这对我来说看起来不错。

'Checkout' 文本由 body、btn 和 btn-success 类生成。在他们的网站上,FontAwesome 通过修改引导类从基本引导类定制了这些。

我建议保持基本引导 css 文件完整并创建自己的 css 样式表并在核心 bootstrap.css 样式表下方引用它,该样式表应该覆盖引导样式。我认为你只需要 body、btn 和 btn-success 类,所以你只需要在自定义样式表中添加:

更新 :

请注意,proxima-nova 字体是通过 Typekit 网络字体服务 ( https://typekit.com/fonts/proxima-nova ) 提供的。

  body {
    font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    }
        .btn-success {
        color: #fff;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
        background-color: #5bb75b;
        background-image: -moz-linear-gradient(top,#62c462,#51a351);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));
        background-image: -webkit-linear-gradient(top,#62c462,#51a351);
        background-image: -o-linear-gradient(top,#62c462,#51a351);
        background-image: linear-gradient(to bottom,#62c462,#51a351);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462',endColorstr='#ff51a351',GradientType=0);
        border-color: #51a351 #51a351 #387038;
        border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }
    .btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
    background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#fff,#e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #bbb;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);
    }
于 2013-02-18T08:18:41.813 回答