字体真棒图像和字体是巨大的

Question

我提取了一个正在另一台计算机上工作的项目。当我加载前端服务器时运行 yarn install 之后，在某些页面上字体和图标显得很大。疯狂的是，在我原来的电脑上一切看起来都很正常。以下是一些屏幕截图：

和

这是我的 html 代码：

<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
    <h2>Asigurare</h2>
    <ol class="breadcrumb">
        <li>
            <a>Acasa</a>
        </li>
        <li>
            <a>Calatorie</a>
        </li>
        <li class="active">
            <strong>Asigurare Calatorie</strong>
        </li>
    </ol>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="ibox">
            <div class="ibox-title">
                <h5>Asigurare Calatorie</h5>

                <div class="ibox-tools">
                    <div class="col-lg-3 pull-right" ng-show="showWizard">
                        <button type="button"  class="btn btn-block btn-danger" ng-click="showWizard=false">
                            <i class="fa fa-fast-backward"> </i> Inapoi
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-12 col-sm-12" ng-show="!showWizard">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h2>Click pe optiunea dorita</h2>
                    </div>
                    <div class="panel-body">
                        <div class="row media-object">
                            <div class="col-xs-6 col-sm-6 option-button">
                                <button class="btn btn-primary dim btn-block option-button btn-text-center" type="button" ng-click="goToSearchExistingOffers()">
                                    <center><i class="fa fa-search fa-5x"/> </center>
                                    Cauta oferte existente
                                </button>
                            </div>
                            <div class="col-xs-6 col-sm-6 option-button">
                                <button class="btn btn-primary dim btn-block option-button btn-text-center" type="button" ng-click="showWizard=true">
                                    <center><i class="fa fa-calculator fa-5x"/> </center>
                                    Calculeaza oferte noi
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ibox-content wizard" ng-show="showWizard">
                <!--<div class="steps clearfix">
                    <button type="button" ng-class="{'btn-primary': stack[0]==true, 'btn-default': stack[0]==false}" class="btn col-lg-3 stepsButtons">
                        1. Informatii asigurare
                    </button>
                </div>-->
                <div class="wizard">
                    <div class="content">

                    <form name="asigurareCalatorieForm" class="p-lg">
                        
                    <!-- /////////////////////////////// PAGE CONTENT HERE ///////////////////////////// -->
                    
                        <!-- EACH STEP IS BETWEEN FIELDSET TAGS --> 
                        <fieldset ng-show="head==0">
                            <h2>Informatii despre asigurat</h2>
                        
                            <div class="row">
                                <div class="form-group col-lg-4">
                                    <label>Nume *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.lastName" name="lastName"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Prenume *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.firstName" name="firstName"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>CNP *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.cnp" name="cnp"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Numar de telefon *</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.phone" name="phone"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Email </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.individual.email" name="email"/>
                                </div>
                            </div>

                            <h2>Adresa asiguratului</h2>
                        
                            <div class="row">
                                <div class="form-group col-lg-2">
                                    <label>Judet </label>
                                    <select class="form-control" data-ng-model="county" name="county" ng-options="county.countyName for county in counties" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Oras </label>
                                    <select class="form-control" data-ng-model="city" name="city" ng-options="city.cityName for city in cities" ng-disabled="!county.countyId">
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Strada </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.street" name="street"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Numar </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.streetNo" name="streetNo"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Bloc </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.building" name="building"/>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label>Scara </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.buildingEntrance" name="buildingEntrance"/>
                                </div>
                                <div class="form-group col-lg-1">
                                    <label>Etaj </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.level" name="level"/>
                                </div>
                                <div class="form-group col-lg-3">
                                    <label>Apartament </label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.address.flatNo" name="flatNo"/>
                                </div>
                            </div>

                             <h2>Detalii calatorie</h2>
                            
                            <div class="row">
                                <div class="form-group col-lg-2">
                                    <label>Scopul calatoriei </label>
                                    <select class="form-control" data-ng-model="travelPurpose" name="travelPurpose" ng-options="travelPurpose.travelPurposeName for travelPurpose in travelPurposeList" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Tara de destinatie</label>
                                    <input type="text" class="form-control" data-ng-model="saveObject.travelInsurance.travelDestination" name="travelDestination"/>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Tip calatorie </label>
                                    <select class="form-control" data-ng-model="travelType" name="travelType" ng-options="travelType.travelTypeName for travelType in travelTypeList" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Data Plecarii</label>
                                    <p class="input-group ">
                                        <input type="text" class="form-control" uib-datepicker-popup="{{format}}"
                                        is-open="isOpenLeavingDate" ng-model="leavingDate" name="leavingDate"/>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="openLeavingDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                        </span>
                                    </p>
                                </div>      
                                <div class="form-group col-lg-2">
                                    <label>Suma asigurata </label>
                                    <select class="form-control" data-ng-model="travelInsuredAmount" name="travelInsuredAmount" ng-options="travelInsuredAmount.travelInsuredAmountName for travelInsuredAmount in travelInsuredAmountList" >
                                         
                                    </select>
                                </div>
                                <div class="form-group col-lg-2">
                                    <label>Data Intoarcerii</label>
                                    <p class="input-group ">
                                        <input type="text" class="form-control" uib-datepicker-popup="{{format}}"
                                        is-open="isOpenReturningDate" ng-model="returningDate" name="returningDate"/>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default" ng-click="openReturningDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                                        </span>
                                    </p>
                                </div>  
                            </div>  
                        </fieldset>
                        <!-- /////////////////////////////// END PAGE CONTENT HERE ///////////////////////////// -->
                                                    
                        <button type="button" ng-show="head==0" class="btn btn-primary col-lg-2 stepsButtons" ng-click="save()">
                            Trimite formularul
                        </button>
                        
                    </form>

                    </div>
                  </div>
            </div>
        </div>
    </div>

</div>

这也是我的 package.json:

和

我还检查了我的 css 文件是否正确加载。我还使用 INSPINIA 自定义主题。我不知道为什么这只发生在我的第二台电脑上。浏览器都一样(最新Chrome).

Answer 1

这可能取决于您的一般字体大小和使用 fa-5x class。

我首先要删除 fa-5x，因为这样会减少 size.You 也可以看看这个 Font Awesome page，它进一步解释了调整大小的图标。

用你的计算器试试——把它改成： <i class="fa fa-calculator"/>

Answer 2

我明白了。在第二台计算机上，当我运行 yarn install 时，更新版本的 jquery (3.6.0) 被拉入 node_modules.

自 jquery 3.5.0 以来，对 HTML 标签的解释方式进行了重大更改，更多详细信息请参见：https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/

因此，作为一种变通方法，我将我的较高版本限制为 jquery 3.4.1，一切又都正常了。长期解决方案是使用 jquery-migrate 来修复我的不兼容代码，详情请参见：https://jquery.com/upgrade-guide/3.5/

字体真棒图像和字体是巨大的

Font awesome images & fonts are huge

html

javascript

css

angularjs

angular-ui-bootstrap