字体真棒图像和字体很大
Posted
技术标签:
【中文标题】字体真棒图像和字体很大【英文标题】：Font awesome images & fonts are huge 【发布时间】：2021-07-25 04:34:23 【问题描述】：我提取了一个正在另一台计算机上工作的项目。 在我加载前端服务器时运行 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）。
【问题讨论】：
您打算这样做：<i class="fa fa-search fa-5x"/> 吗？ fa-5x 类使 Font Awesome 能够渲染非常大的图像。
【参考方案1】：
这可能取决于您的一般字体大小和使用fa-5x 类。
我会先删除fa-5x，因为这应该会减小大小。您也可以看看这个Font Awesome page，它进一步解释了大小图标。
用你的计算器试试 - 把它改成：
<i class="fa fa-calculator"/>
【讨论】：
但是为什么在我原来的电脑上一切正常？ 为什么标签也很大？【参考方案2】：我想通了。 在我运行 yarn install 的第二台计算机上，在 node_modules 中提取了更新版本的 jquery (3.6.0)。
自 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/
【讨论】：
以上是关于字体真棒图像和字体很大的主要内容，如果未能解决你的问题，请参考以下文章