【发布时间】：2019-04-26 13:04:07
【问题描述】：
我有以下使用 Bootstrap 3 的代码。当我使用“Open Sans”作为字体时，页面呈现良好。但是当我将字体更改为其他字体（例如 verdana）时，布局会中断。
这是带有“Open Sans”的布局
这个是带verdana的
我注意到的另一件事是，如果第一行下的元素（年龄和身高）都是相同类型（即所有文本框或所有下拉菜单），即使使用 verdana，页面也会正确呈现。
据我所知，该页面使用“Open Sans”呈现正常，但与其他字体中断。
这里是带有 verdana 字体的 HTML 代码。如果将字体更改为“Open Sans”，它就可以工作
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style >
body {
font-family: verdana;
}
label {
font-weight: normal;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Age</label>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MinAge" >
</div>
<div class="col-xs-2"> to</div>
<div class="col-xs-3" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<input class="form-control" type="text" size="2" maxlength="2" name="MaxAge">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" style="width: 100%;" for="nome">Height</label>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MinHt" size="1">
<option selected value="">Pick One</option>
<option value="54">4ft 6in</option>
</select>
</div>
<div class="col-xs-2">to</div>
<div class="col-xs-5" style="background-color: yellow;padding-left: 0px;padding-right: 0px;">
<select class="form-control" name="MaxHt" size="1">
<option selected value="">Pick One</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Religion</label>
<select name="Religion" size="1" onchange="populateCastes( 'Religion', 'Language', 'CasteId', this.form, 'M' );" class="form-control">
<option value="">Pick One</option>
<option value="01_H">Hindu</option>
<option value="07_Z">Zorastrian</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label" for="nome">Caste</label>
<select class="form-control" name="Caste" id="CasteId" SIZE=1 disabled="true" MULTIPLE onclick="selectBrahmin(this.form);">
<option value="">Pick One
</select>
</div>
</div>
</form>
</div>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>
为什么它不适用于其他字体？
【问题讨论】：
标签： html css twitter-bootstrap fonts